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

相关推荐
WangHappy2 小时前
不写 Canvas 也能搞定!小程序图片导出的 WebView 通信方案
前端·微信小程序
小时前端7 小时前
微信小程序选不了本地文件?用 web-view + H5 一招搞定
前端·微信小程序·uni-app
icebreaker1 天前
Weapp-vite:原生模式之外,多一种 Vue SFC 选择
前端·vue.js·微信小程序
icebreaker1 天前
重走 Vue 长征路 Weapp-vite:编译链路与 Wevu 运行时原理拆解
前端·vue.js·微信小程序
大米饭消灭者4 天前
Taro是怎么实现一码多端的【底层原理】
微信小程序·taro
西岸行者5 天前
学习笔记:SKILLS 能帮助更好的vibe coding
笔记·学习
starlaky5 天前
Django入门笔记
笔记·django
勇气要爆发5 天前
吴恩达《LangChain LLM 应用开发精读笔记》1-Introduction_介绍
笔记·langchain·吴恩达
悠哉悠哉愿意5 天前
【单片机学习笔记】串口、超声波、NE555的同时使用
笔记·单片机·学习
勇气要爆发5 天前
吴恩达《LangChain LLM 应用开发精读笔记》2-Models, Prompts and Parsers 模型、提示和解析器
android·笔记·langchain