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

相关推荐
kaixin_啊啊2 小时前
中国研究生数学建模竞赛(华为杯)学习笔记——三维瀑布图绘图代码
笔记·学习·数学建模
动词ing2 小时前
【学习笔记】数据结构(链表合并 双指针合并有序链表)
数据结构·笔记·学习
问心无愧05133 小时前
ctf show web 178
前端·笔记
ljt27249606613 小时前
Vue笔记--路由
javascript·vue.js·笔记
QQ_21696290963 小时前
基于微服务架构的店铺管理系统的设计与实现
大数据·spring boot·后端·spring·微服务·小程序·架构
疯狂打码的少年3 小时前
【计算机网络】网络互连设备(中继器 / 网桥 / 交换机 / 路由器 / 网关)
网络·笔记·计算机网络·智能路由器
ljt27249606613 小时前
Vue笔记--状态管理
前端·vue.js·笔记
John_ToDebug11 小时前
判断力无法被 AI 替代,但它正在被你亲手扔掉
经验分享·笔记
柳鲲鹏13 小时前
运气学概论:提纲草案
笔记
疯狂打码的少年15 小时前
【计算机网络】子网掩码与子网划分计算(含CIDR表示法)
服务器·笔记·计算机网络·php