微信小程序圖表插件(wx-charts)基于canvas繪制,體積小巧支持圖表類型餅圖、線圖、柱狀圖 、區域圖等圖表圖形繪制,目前wx-charts是微信小程序圖表插件中比較強大好使的一個。
wx-charts基于canvas繪制的微信小程序圖表插件
支持圖表類型
餅圖?pie
線圖?line
柱狀圖?column
區域圖?area
高清顯示
設置canvas的尺寸為2倍大小,然后縮小到50%,建議都進行這樣的設置,圖表本身繪制時是按照高清顯示配置的,不然整體效果會偏大
/* 例如設計圖尺寸為320 x 300 */.canvas{width:640px;height:600px;transform:scale(0.5)}
wx-charts參數說明
opts?Object
opts.canvasId?String?required?微信小程序canvas-id
opts.width?Number?required?canvas寬度,單位為px
opts.height?Number?required?canvas高度,單位為px
opts.type?String?required?圖表類型,可選值為pie,?line,?column,?area
opts.categories?Array?required?(餅圖不需要)?數據類別分類
opts.dataLabel?Boolean default?true?是否在圖表中顯示數據內容值
opts.yAxis?Object Y軸配置
opts.yAxis.format?Function 自定義Y軸文案顯示
opts.yAxis.min?Number Y軸起始值
opts.yAxis.title?String Y軸title
opts.series?Array?required?數據列表
數據列表每項結構定義
dataItem?Object
dataItem.data?Array?required?(餅圖為Number)?數據
dataItem.color?String 例如#7cb5ec?不傳入則使用系統默認配色方案
dataItem.name?String 數據名稱
dateItem.format?Function 自定義顯示數據內容
wx-charts圖表插件示例
餅圖pie chart
線圖line chart
柱狀圖columnChart
區域圖areaChart
項目地址及下載:
https://github.com/xiaolin3303/wx-charts