您好,登錄后才能下訂單哦!
本文小編為大家詳細介紹“微信小程序中圖表插件wx-charts怎么使用”,內容詳細,步驟清晰,細節(jié)處理妥當,希望這篇“微信小程序中圖表插件wx-charts怎么使用”文章能幫助大家解決疑惑,下面跟著小編的思路慢慢深入,一起來學習新知識吧。
微信小程序圖表工具,charts for WeChat small app
基于canvas繪制,體積小巧
支持圖表類型
餅圖 pie
圓環(huán)圖 ring
線圖 line
柱狀圖 column
區(qū)域圖 area
代碼分析 Here
參數說明
opts Object
opts.canvasId String required 微信小程序canvas-id
opts.width Number required canvas寬度,單位為px
opts.height Number required canvas高度,單位為px
opts.title Object (only for ring chart)
opts.title.name String 標題內容
opts.title.fontSize Number 標題字體大小(可選,單位為px)
opts.title.color String 標題顏色(可選)
opts.subtitle Object (only for ring chart)
opts.subtitle.name String 副標題內容
opts.subtitle.fontSize Number 副標題字體大?。蛇x,單位為px)
opts.subtitle.color String 副標題顏色(可選)
opts.animation Boolean default true 是否動畫展示
opts.legend Boolen default true 是否顯示圖表下方各類別的標識
opts.type String required 圖表類型,可選值為pie, line, column, area, ring
opts.categories Array required (餅圖、圓環(huán)圖不需要) 數據類別分類
opts.dataLabel Boolean default true 是否在圖表中顯示數據內容值
opts.dataPointShape Boolean default true 是否在圖表中顯示數據點圖形標識
opts.xAxis Object X軸配置
opts.xAxis.disableGrid Boolean default false 不繪制X軸網格
opts.yAxis Object Y軸配置
opts.yAxis.format Function 自定義Y軸文案顯示
opts.yAxis.min Number Y軸起始值
opts.yAxis.max Number Y軸終止值
opts.yAxis.title String Y軸title
opts.yAxis.disabled Boolean default false 不繪制Y軸
opts.series Array required 數據列表
數據列表每項結構定義
dataItem Object
dataItem.data Array required (餅圖、圓環(huán)圖為Number) 數據
dataItem.color String 例如#7cb5ec 不傳入則使用系統(tǒng)默認配色方案
dataItem.name String 數據名稱
dateItem.format Function 自定義顯示數據內容
Example
pie chart
var wxCharts = require('wxcharts.js'); new wxCharts({ canvasId: 'pieCanvas', type: 'pie', series: [{ name: 'cat1', data: 50, }, { name: 'cat2', data: 30, }, { name: 'cat3', data: 1, }, { name: 'cat4', data: 1, }, { name: 'cat5', data: 46, }], width: 360, height: 300, dataLabel: true });
ring chart
new wxCharts({ canvasId: 'ringCanvas', type: 'ring', series: [{ name: '成交量1', data: 15, }, { name: '成交量2', data: 35, }, { name: '成交量3', data: 78, }, { name: '成交量4', data: 63, }], width: 320, height: 200, dataLabel: false });
line chart
new wxCharts({ 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: 320, height: 200 });
columnChart
new wxCharts({ canvasId: 'columnCanvas', type: 'column', categories: ['2012', '2013', '2014', '2015', '2016', '2017'], series: [{ name: '成交量1', data: [15, 20, 45, 37, 4, 80] }, { name: '成交量2', data: [70, 40, 65, 100, 34, 18] }], yAxis: { format: function (val) { return val + '萬'; } }, width: 320, height: 200 });
areaChart
new wxCharts({ 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: 320, height: 200 });
讀到這里,這篇“微信小程序中圖表插件wx-charts怎么使用”文章已經介紹完畢,想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會,如果想了解更多相關內容的文章,歡迎關注億速云行業(yè)資訊頻道。
免責聲明:本站發(fā)布的內容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。