Tracy 小笔记:微信小程序 mpx 雷达图的实现

使用文档:

https://www.kancloud.cn/xchhhh/wx-chart/399337

https://github.com/xiaolin3303/wx-charts

https://gitee.com/mirrors/wx-charts/#wx-charts

参数说明: https://github.com/xiaolin3303/wx-charts/issues/56

下载 dist 里的 wx-charts-min.js

<canvas class="cav" canvas-id="radarCanvas"></canvas>]

复制代码
    const WxCharts = require('../../api/wx-charts.js')
      const chart = new WxCharts({
        canvasId: 'radarCanvas',
        type: 'radar',
        categories: ['title1', 'title2', 'title3', 'title4', 'title5'],
        series: [{
          data: [0, 0, 0, 0, 0]
        }],
        width: 280,
        height: 280,
        extra: {
          radar: {
            max: 10,
            labelColor: '#ffffff',
            gridColor: '#8382cd'
          }
        },
        subtitleFontSize: 24,
        legend: false,
        fontSize: 24
      })
      chart.updateData({
        series: [{
          data: [8, 2,3,4,10]
        }]
      })

.cav

height 280px

max-width 100%

width 280px

margin 0 auto

相关推荐
double_eggm17 分钟前
微信小程序7
微信小程序·小程序
程序鉴定师1 小时前
上海小程序开发的坚实保障与行业优势解析
大数据·小程序
小+不通文墨1 小时前
把树莓派外接的DHT11接收的温湿度发送到emqx上
经验分享·笔记·嵌入式硬件·学习·树莓派
会编程的土豆2 小时前
Go 方法接收者超清晰笔记(类型名 vs 变量名)
开发语言·笔记·golang
fanged3 小时前
C++的汇编实现(TODO)
笔记
不羁的木木3 小时前
Form Kit(卡片开发服务)学习笔记01-核心概念与架构设计
笔记·学习·harmonyos
不羁的木木3 小时前
ArkWeb实战学习笔记01-核心概念与架构设计
笔记·学习·harmonyos
大明者省4 小时前
IIS 端口绑定正常访问的原理说明与常见误区澄清
运维·服务器·笔记
数据皮皮侠AI4 小时前
上市公司耐心资本数据(2010-2025)
大数据·人工智能·笔记·能源·1024程序员节