微信小程序圖表插件(wx-charts)基于canvas繪制熬苍,體積小巧支持圖表類型餅圖稍走、線圖、柱狀圖 柴底、區(qū)域圖等圖表圖形繪制婿脸,目前wx-charts是微信小程序圖表插件中比較強(qiáng)大好使的一個(gè)。
wx-charts基于canvas繪制的微信小程序圖表插件
支持圖表類型
餅圖?pie
線圖?line
柱狀圖?column
區(qū)域圖?area
高清顯示
設(shè)置canvas的尺寸為2倍大小柄驻,然后縮小到50%狐树,建議都進(jìn)行這樣的設(shè)置,圖表本身繪制時(shí)是按照高清顯示配置的鸿脓,不然整體效果會(huì)偏大
/* 例如設(shè)計(jì)圖尺寸為320 x 300 */.canvas{width:640px;height:600px;transform:scale(0.5)}
wx-charts參數(shù)說明
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?(餅圖不需要)?數(shù)據(jù)類別分類
opts.dataLabel?Boolean default?true?是否在圖表中顯示數(shù)據(jù)內(nèi)容值
opts.yAxis?Object Y軸配置
opts.yAxis.format?Function 自定義Y軸文案顯示
opts.yAxis.min?Number Y軸起始值
opts.yAxis.title?String Y軸title
opts.series?Array?required?數(shù)據(jù)列表
數(shù)據(jù)列表每項(xiàng)結(jié)構(gòu)定義
dataItem?Object
dataItem.data?Array?required?(餅圖為Number)?數(shù)據(jù)
dataItem.color?String 例如#7cb5ec?不傳入則使用系統(tǒng)默認(rèn)配色方案
dataItem.name?String 數(shù)據(jù)名稱
dateItem.format?Function 自定義顯示數(shù)據(jù)內(nèi)容
wx-charts圖表插件示例
餅圖pie chart
線圖line chart
柱狀圖columnChart
區(qū)域圖areaChart
項(xiàng)目地址及下載:
https://github.com/xiaolin3303/wx-charts