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

相关推荐
疯狂打码的少年5 小时前
【软件工程】软件开发模型:增量模型与迭代模型
笔记·软件工程
Generalzy6 小时前
从本地 Demo 到生产级检索:Milvus 学习笔记(3)
笔记·学习·milvus
凉、介8 小时前
Virtio 系列(一):框架概览
笔记·学习·嵌入式·虚拟化·virtio
Yang_jie_039 小时前
笔记:数据结构(栈是否使用底指针以及头指针的初始化值)
数据结构·笔记·算法
一杯奶茶¥10 小时前
c语言程序设计大学期末考试考研知识点重点笔记题库复习资料C语言重点考点题库资料合集
c语言·笔记·考研·c语言程序设计·c语言笔记
依然范特东10 小时前
动手学深度学习笔记--数据操作、线性代数
人工智能·笔记·深度学习
疯狂打码的少年11 小时前
【软件工程】软件开发模型:敏捷开发(Scrum/XP)
笔记·软件工程·scrum·敏捷流程
黄华SJ520it11 小时前
线上线下多门店融合系统开发指南
小程序·系统开发
FakeOccupational11 小时前
【电路笔记 信号】传输线方程:从RLGC推导传输线特性阻抗
笔记
气甲艳雯13 小时前
成功解决联想系列笔记本和ubuntu22.04版本的网卡声卡不兼容问题
笔记·架构