wx-charts中如何使用微信小程序圖表插件-創(chuàng)新互聯(lián)
小編給大家分享一下wx-charts中如何使用微信小程序圖表插件，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
微信小程序圖表插件（wx-charts）基于canvas繪制，體積小巧，支持圖表類型餅圖、線圖、柱狀圖 、區(qū)域圖等圖表圖形繪制，目前wx-charts是微信小程序圖表插件中比較強大好使的一個
支持圖標類型
餅圖 pie
圓環(huán)圖 ring
線圖 line
柱狀圖 column
區(qū)域圖 area
雷達圖 radar
如何使用？
直接引用編譯好的文件 dist/charts.js（js下載地址）
.wxml中定義
<canvas canvas-id="lineCanvas" disable-scroll="true" class="canvas"></canvas>
canvas-id與new wxCharts({canvasId:”})中canvasId一致
2. 命令行
git clone github.com/xiaolin3303/wx-charts.git npm install rollup -g npm install rollup -c 或者 rollup --config rollup.config.prod.js
參數(shù)說明
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 標題字體大?。蛇x，單位為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…… opts.categories Array required (餅圖、圓環(huán)圖不需要) 數(shù)據(jù)類別分類 opts.dataLabel Boolean default true 是否在圖表中顯示數(shù)據(jù)內容值 opts.dataPointShape Boolean default true 是否在圖表中顯示數(shù)據(jù)點圖形標識 opts.xAxis Object X軸配置 opts.xAxis.disableGrid Boolean default false 不繪制X軸網(wǎng)格 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 數(shù)據(jù)列表
數(shù)據(jù)列表每項結構定義
dataItem Object dataItem.data Array required (餅圖、圓環(huán)圖為Number) 數(shù)據(jù) dataItem.color String 例如#7cb5ec 不傳入則使用系統(tǒng)默認配色方案 dataItem.name String 數(shù)據(jù)名稱 dateItem.format Function 自定義顯示數(shù)據(jù)內容
詳見demo（具體demo git地址）
1.pie
new wxCharts({
animation: true, //是否有動畫
canvasId: 'pieCanvas',
type: 'pie',
series: [{
name: '成交量1',
data: 15,
}, {
name: '成交量2',
data: 35,
}, {
name: '成交量3',
data: 78,
}],
width: windowWidth,
height: 300,
dataLabel: true,
});
}
2. ring
new wxCharts({
animation: true,
canvasId: 'ringCanvas',
type: 'ring',
extra: {
ringWidth: 25,
pie: {
offsetAngle: -45
}
},
title: {
name: '70%',
color: '#7cb5ec',
fontSize: 25
},
subtitle: {
name: '收益率',
color: '#666666',
fontSize: 15
},
series: [{
name: '成交量1',
data: 15,
stroke: false
}, {
name: '成交量2',
data: 35,
stroke: false
}, {
name: '成交量3',
data: 78,
stroke: false
}, {
name: '成交量4',
data: 63,
stroke: false
}],
disablePieStroke: true,
width: windowWidth,
height: 200,
dataLabel: false,
legend: false,
padding: 0
});
3. line
new wxCharts({
canvasId: 'lineCanvas',
type: 'line',
categories: simulationData.categories,
animation: true,
background: '#f5f5f5',
series: [{
name: '成交量1',
data: simulationData.data,
format: function (val, name) {
return val.toFixed(2) + '萬';
}
}, {
name: '成交量2',
data: [2, 0, 0, 3, null, 4, 0, 0, 2, 0],
format: function (val, name) {
return val.toFixed(2) + '萬';
}
}],
xAxis: {
disableGrid: true
},
yAxis: {
title: '成交金額 (萬元)',
format: function (val) {
return val.toFixed(2);
},
min: 0
},
width: windowWidth,
height: 200,
dataLabel: false,
dataPointShape: true,
extra: {
lineStyle: 'curve'
}
});
4. column
new wxCharts({
canvasId: 'columnCanvas',
type: 'column',
animation: true,
categories: chartData.main.categories,
series: [{
name: '成交量',
data: chartData.main.data,
format: function (val, name) {
return val.toFixed(2) + '萬';
}
}],
yAxis: {
format: function (val) {
return val + '萬';
},
title: 'hello',
min: 0
},
xAxis: {
disableGrid: false,
type: 'calibration'
},
extra: {
column: {
width: 15
}
},
width: windowWidth,
height: 200,
});
5. area
new wxCharts({
canvasId: 'areaCanvas',
type: 'area',
categories: ['1', '2', '3', '4', '5', '6'],
animation: true,
series: [{
name: '成交量1',
data: [32, 45, 0, 56, 33, 34],
format: function (val) {
return val.toFixed(2) + '萬';
}
}, {
name: '成交量2',
data: [15, 20, 45, 37, 4, 80],
format: function (val) {
return val.toFixed(2) + '萬';
},
}],
yAxis: {
title: '成交金額 (萬元)',
format: function (val) {
return val.toFixed(2);
},
min: 0,
fontColor: '#8085e9',
gridColor: '#8085e9',
titleFontColor: '#f7a35c'
},
xAxis: {
fontColor: '#7cb5ec',
gridColor: '#7cb5ec'
},
extra: {
legendTextColor: '#cb2431'
},
width: windowWidth,
height: 200
});
6.radar
new wxCharts({
canvasId: 'radarCanvas',
type: 'radar',
categories: ['1', '2', '3', '4', '5', '6'],
series: [{
name: '成交量1',
data: [90, 110, 125, 95, 87, 122]
}],
width: windowWidth,
height: 200,
extra: {
radar: {
max: 150
}
}
});
以上是“wx-charts中如何使用微信小程序圖表插件”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注創(chuàng)新互聯(lián)成都網(wǎng)站設計公司行業(yè)資訊頻道！
另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。
網(wǎng)站名稱：wx-charts中如何使用微信小程序圖表插件-創(chuàng)新互聯(lián)
網(wǎng)頁鏈接：http://jinyejixie.com/article24/ggdce.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、手機網(wǎng)站建設、商城網(wǎng)站、自適應網(wǎng)站、外貿(mào)網(wǎng)站建設、網(wǎng)站策劃
聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)
- 偽靜態(tài)和靜態(tài)頁面哪一個更好 2016-11-02
- 如何區(qū)別動態(tài)網(wǎng)站和靜態(tài)網(wǎng)站以及他們的特點 2021-05-25
- 網(wǎng)站建設選擇動態(tài)還是靜態(tài)頁面好 2013-10-08
- 營銷型網(wǎng)站建設中什么是動態(tài)網(wǎng)站、靜態(tài)網(wǎng)站 2013-06-07
- 網(wǎng)站靜態(tài)化后，百度的一些反應 2016-08-13
- 靜態(tài)網(wǎng)頁與動態(tài)網(wǎng)頁的工作機制 2016-10-30
- 靜態(tài)網(wǎng)站跟動態(tài)網(wǎng)站在制作上有哪些區(qū)別呢 2016-11-12
- 網(wǎng)站建設動態(tài)和靜態(tài)哪個好? 2016-11-12
- 談談網(wǎng)站建設靜態(tài)網(wǎng)站與動態(tài)網(wǎng)站的區(qū)別-網(wǎng)站建設創(chuàng)新互聯(lián)科技 2021-09-27
- 關于網(wǎng)站靜態(tài)資源概述 2014-11-27
- 什么是共享(獨享)IP、動態(tài)(靜態(tài))IP、固定IP？ 2016-11-10
- 動態(tài)網(wǎng)站是什么？動態(tài)網(wǎng)站與靜態(tài)網(wǎng)站有什么區(qū)別 2016-09-16