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

相关推荐
lkbhua莱克瓦241 天前
基础-SQL-DCL
开发语言·数据库·笔记·mysql·dcl
豌豆学姐1 天前
Sora2 能做什么?25 秒视频生成 API 的一次接入实践
大数据·人工智能·小程序·aigc·php·开源软件
QT 小鲜肉1 天前
【Linux命令大全】001.文件管理之mc命令(实操篇)
linux·运维·服务器·前端·笔记
手揽回忆怎么睡1 天前
Streamlit学习笔记
笔记·学习
李慕婉学姐1 天前
【开题答辩过程】以《智慧校园创新互助小程序的设计与实现》为例,不知道这个选题怎么做的,不知道这个选题怎么开题答辩的可以进来看看
java·spring boot·小程序
潲爺1 天前
Java-IO笔记
java·笔记·学习
zzcufo1 天前
wincc VBS 中的 Round() 函数详解
windows·笔记
qq_12498707531 天前
基于微信小程序的校园跑腿系统的设计与实现(源码+论文+部署+安装)
spring boot·微信小程序·小程序·毕业设计·计算机毕业设计
stars-he1 天前
FPGA学习笔记(7)以太网UDP数据报文发送电路设计(一)
笔记·网络协议·学习·fpga开发·udp
lkbhua莱克瓦241 天前
基础-SQL-DML
开发语言·数据库·笔记·sql·mysql