微信小程式圖表外掛程式(wx-charts)基於canvas繪製,體積小巧支援圖表類型餅圖、線條圖、長條圖、區域圖等圖表圖形繪製,目前wx-charts是微信小程式圖表外掛程式中比較強大好使的一個,微信小程式圖表外掛wx-charts參數及使用教學。
wx-charts
支援圖表類型
圓餅圖 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軸titleopts.series Array required 資料清單資料清單每項結構定義##dataItem Object
##dataItem.data Array required (圓餅圖為Number) 資料dataItem.color String 例如#7cb5ec 不傳入則使用系統預設配色方案dataItem.name String 資料名稱dateItem.format Function 自訂顯示資料內容wx-charts圖表外掛範例餅圖pie chartvar Charts = require('charts.js'); new Charts({ canvasId: 'pieCanvas', type: 'pie', series: [{ name: '成交量1', data: 15, }, { name: '成交量2', data: 35, }, { name: '成交量3', data: 78, }, { name: '成交量4', data: 63, }], width: 640, height: 400, dataLabel: false });
線圖line chart
new Charts({ canvasId: 'lineCanvas', type: 'line', categories: ['2012', '2013', '2014', '2015', '2016', '2017'], series: [{ name: '成交量1', data: [0.15, 0.2, 0.45, 0.37, 0.4, 0.8], format: function (val) { return val.toFixed(2) + '万'; } }, { name: '成交量2', data: [0.30, 0.37, 0.65, 0.78, 0.69, 0.94], format: function (val) { return val.toFixed(2) + '万'; } }], yAxis: { title: '成交金额 (万元)', format: function (val) { return val.toFixed(2); }, min: 0 }, width: 640, height: 400 });
長條圖columnChart
new Charts({ canvasId: 'columnCanvas', type: 'column', categories: ['2016-08', '2016-09', '2016-10', '2016-11', '2016-12', '2017'], series: [{ name: '成交量1', data: [15, 20, 45, 37, 4, 80] }, { name: '成交量2', data: [70, 40, 65, 100, 34, 18] }, { name: '成交量3', data: [70, 40, 65, 100, 34, 18] }, { name: '成交量4', data: [70, 40, 65, 100, 34, 18] }], yAxis: { format: function (val) { return val + '万'; } }, width: 640, height: 400, dataLabel: false });
區域圖areaChart
new Charts({ canvasId: 'areaCanvas', type: 'area', categories: ['2016-08', '2016-09', '2016-10', '2016-11', '2016-12', '2017'], series: [{ name: '成交量1', data: [70, 40, 65, 100, 34, 18], format: function (val) { return val.toFixed(2) + '万'; } }, { name: '成交量2', data: [15, 20, 45, 37, 4, 80], format: function (val) { return val.toFixed(2) + '万'; } }], yAxis: { format: function (val) { return val + '万'; } }, width: 640, height: 400 });
以上是實例詳解微信小程式圖表外掛程式wx-charts參數的詳細內容。更多資訊請關注PHP中文網其他相關文章!