微信小程序圖表插件(wx-charts)

微信小程序圖表插件(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

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容