哈尔滨市网站建设公司-小程序图表插件(wx
摘要: 手机微信微信小程序数据图表软件(wx-charts)根据canvas绘图,容积精巧适用数据图表种类饼图、线图、柱状图 、地区图等数据图表图型绘图,现阶段wx-charts是手机微信微信小程序数据图...
哈尔滨市网站建设公司
------- 手机微信小程序图表软件(wx-charts)根据canvas绘图,体积精巧适用图表种类饼图、线图、柱状图 、地区图等图表图型绘图,现阶段wx-charts是手机微信小程序图表软件中比较强劲好使的一个。手机微信小程序图表软件(wx-charts)根据canvas绘图,体积精巧适用图表种类饼图、线图、柱状图 、地区图等图表图型绘图,现阶段wx-charts是手机微信小程序图表软件中比较强劲好使的一个。 wx-charts根据canvas绘图的手机微信小程序图表软件 适用图表种类
设定canvas的尺寸为2倍尺寸,随后变小到50%,提议都开展这样的设定,图表自身绘图时是依照高清显示信息配备的,要不然总体实际效果会偏大
/* 例如设计方案图尺寸为320 x 300 */ .canvas { width: 640px; height: 600px; transform: scale(0.5) }
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
var 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⑽ , 2016⑾ , 2016⑿ , 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⑽ , 2016⑾ , 2016⑿ , 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 });新项目详细地址及免费下载: xiaolin3303/wx-charts ↓ 查询全文 <
手机微信小程序图表软件(wx-charts)由懒人建网站搜集梳理,您能够随意散播,请积极带上本文连接
懒人建网站就是完全免费共享,觉得有效就多来适用一下,沒有能帮到您,懒人也只能表明遗憾,期待有一天能帮到您。
---------