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

相关推荐
想成为优秀工程师的爸爸24 分钟前
车载以太网之要火系列 - 第33篇:郭大侠学UDS(10服务)- 桃花岛内规矩多,模式切换要会说
网络·笔记·网络协议·信息与通信·车载以太网
智者知已应修善业29 分钟前
【51单片机从奇数始再转偶数逐一点亮并循环】2023-9-8
c++·经验分享·笔记·算法·51单片机
sealaugh3231 分钟前
react native(学习笔记第三课) 英语打卡微应用(2)-从上传图片开始
笔记·学习·react native
ZC跨境爬虫39 分钟前
Python Django开发者转向微信小程序:从架构理解到第一行代码的完整准备指南
开发语言·python·ui·微信小程序·django
李李李勃谦1 小时前
鸿蒙PC打造电子书阅读器:支持 EPUB/PDF、书签同步、笔记管理
笔记·华为·pdf·harmonyos
U盘失踪了1 小时前
【笔记】Cookie 请求头的写法
笔记
Brilliantwxx1 小时前
【C++】认识vector(概念+题目OJ)
开发语言·c++·笔记·算法
m0_46644103詹湛1 小时前
(一)FPGA :基础概念详解(Xilinx平台)
笔记·学习·fpga开发·verilog
zuozewei1 小时前
Agent Teams 实验笔记:让 Claude Code 三个 Agent 跑一遍 Todo Demo
笔记
ZC跨境爬虫2 小时前
跟着 MDN 学 HTML day_13:多媒体嵌入 —— 视频与音频
前端·css·笔记·ui·html·音视频