微信小程序的wx-charts插件
還有就是可使用一些小程序的插件，好比wx-charts.javascript
先來看一下網上對這個插件的評價：java
目前在github上有1804顆星，使用的比較普遍。git
github地址：https://github.com/xiaolin3303/wx-charts.git；github
支持圖標類型
- 餅圖 pie
- 圓環圖 ring
- 線圖 line
- 柱狀圖 column
- 區域圖 area
- 雷達圖 radar
使用方法canvas
直接引入編譯好的dist裏面的js文件（二選一）小程序
而後在須要使用的頁面的js當中使用require引入便可：微信小程序
let Charts = require('./../../utils/wxcharts.js');
.wxml中定義微信
<canvas canvas-id="canvas1"></canvas>
<canvas canvas-id="canvas2"></canvas>
<canvas canvas-id="canvas3"></canvas>
<canvas canvas-id="canvas4"></canvas>
<canvas canvas-id="canvas5"></canvas>
<canvas canvas-id="canvas6"></canvas>
canvas-id與js當中的new Charts選項當中的canvasId必需要一致才行；字體
參數說明：動畫
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 副標題字體大小（可選，單位爲px） opts.subtitle.color String 副標題顏色（可選） opts.animation Boolean default true 是否動畫展現 opts.legend Boolen default true 是否顯示圖表下方各種別的標識 opts.type String required 圖表類型，可選值爲pie, line, column, area，radar，ring opts.categories Array required (餅圖、圓環圖不須要) 數據類別分類 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.titleFontColor String Y軸title的文字的顏色
opts.yAxis.fontColor String Y軸文字的顏色
opts.yAxis.gridColor String Y軸格子的顏色
opts.yAxis.disabled Boolean default false 不繪製Y軸 opts.series Array required 數據列表
數據列表series的參數
dataItem Object dataItem.data Array required (餅圖、圓環圖爲Number) 數據 dataItem.color String 例如#7cb5ec 不傳入則使用系統默認配色方案 dataItem.name String 數據名稱 dateItem.format Function 自定義顯示數據內容
高清顯示
設置canvas的尺寸爲2倍大小，而後縮小到50%，建議都進行這樣的設置，圖表自己繪製時是按照高清顯示配置的，否則總體效果會偏大（通常以iPhone6爲標準進行設計）
/* 例如設計圖尺寸爲320 x 300 */
.canvas {
width: 640px;
height: 600px;
transform: scale(0.5)
}
例子：
pie（餅圖）
new Charts({
canvasId: 'canvas1',
type: 'pie',
series: [{ name: '一班', data: 50 }, { name: '二班', data: 30 }, { name: '三班', data: 20 }, { name: '四班', data: 18 }, { name: '五班', data: 8 }],
width: 640,
height: 400,
dataLabel: true,
});
線圖（circle）
new Charts({
canvasId: 'canvas2',
dataPointShape: "circle",
type: 'line',
extra: {
lineStyle: 'curve' //線條的形狀（弧形）
},
categories: ['2012', '2013', '2014', '2015', '2016', '2017'],
series: [{
name: '成交量1',
data: [0.15, null, 0.45, 0.37, 0.4, 0.8],//設置某一個值爲null會出現斷層
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);
},
fontColor: "red",
titleFontColor: "red",
min: 0,
gridColor:"red"
}, width: 840, height: 600, dataLabel: true });
柱狀圖（column）
new Charts({
canvasId: 'canvas3',
dataPointShape: false,
type: 'column',
categories: ['2016-08', '2016-09', '2016-10', '2016-11', '2016-12', '2017'],
series: [{
name: '成交量1',
data: [15, 20, 45, 37, 4, 80],
color:"rgba(0,0,0,0.3)"//支持rgba，但不支持漸變色
}, {
name: '成交量2',
data: [70, 40, 65, 100, 34, 18]
}, {
name: '成交量3',
data: [100, 50, 75, 200, 15, 13]
}],
yAxis: {
format: function (val) {
return val + '萬';
}
},
xAxis: {
disableGrid: true,
},
width: 640,
height: 400,
dataLabel: true,
extra: {
column: {
width: 40 //柱的寬度
}
}
});
區域圖（area）
new Charts({
canvasId: 'canvas4',
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
});
環形圖（ring）
new Charts({
animation: true,
canvasId: 'canvas5',
type: 'ring',
extra: {
ringWidth: 10,//圓環的寬度
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: 640,
height: 200,
dataLabel: true,
legend: false,
padding: 0
});
雷達圖（radar）
new Charts({
animation: true,
canvasId: 'canvas6',
type: 'radar',
categories: ['1', '2', '3', '4', '5', '6'],
series: [{
name: '成交量1',
data: [90, 110, 125, 95, 87, 122]
}, {
name: '成交量2',
data: [190, 210, 105, 35, 27, 102]
}],
width: 640,
height: 200,
extra: {
radar: {
max: 200//雷達數值的最大值
}
}
});
可是，每個插件都不是完美的，wx-charts雖然易上手的很容易的繪製圖形，可是沒法知足一些複雜的狀況，好比highcharts裏面的一些散點圖啊之類的，x軸沒法法定義title，沒法實現背景色的改變和手指上移數據的展現，也沒法實現多個圖形進行結合，如折線圖和柱形圖進行同時的展現，只適合一些簡單的數據和單一圖像的展現。
相關文章
- 1. 微信小程序圖表插件wxcharts使用
- 2. 微信小程序插件
- 3. 微信小程序的wx-charts插件
- 4. vsCode 開發微信小程序插件
- 5. 微信小程序-插件使用
- 6. 微信小程序安裝VantWeappUI插件
- 7. 微信小程序 —— 微信小程序解析html富文本插件wxParse
- 8. 一次使用wxcharts做微信小程序圖表功能採到的坑
- 9. wepy開發微信小程序,在頁面內繪製圖表 使用wxCharts插件
- 10. 微信小程序系列（三）：微信小程序事件
- 更多相關文章...
- • Maven 插件 - Maven教程
- • W3C 程序 - W3C 教程
- • IntelliJ IDEA安裝代碼格式化插件
- • IDEA下SpringBoot工程配置文件沒有提示
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 安裝cuda+cuDNN
- 2. GitHub的使用說明
- 3. phpDocumentor使用教程【安裝PHPDocumentor】
- 4. yarn run build報錯Component is not found in path 「npm/taro-ui/dist/weapp/components/rate/index「
- 5. 精講Haproxy搭建Web集羣
- 6. 安全測試基礎之MySQL
- 7. C/C++編程筆記：C語言中的複雜聲明分析，用實例帶你完全讀懂
- 8. Python3教程(1)----搭建Python環境
- 9. 李宏毅機器學習課程筆記2：Classification、Logistic Regression、Brief Introduction of Deep Learning
- 10. 阿里雲ECS配置速記
歡迎關注本站公眾號,獲取更多信息
