Shulou(Shulou.com)05/31 Report--

Today, I would like to share with you how WeChat Mini Programs uses the chart plug-in wx-charts related knowledge points, the content is detailed, the logic is clear, I believe most people still know too much about this knowledge, so share this article for your reference, I hope you can get something after reading this article, let's take a look at it.

WeChat Mini Programs Chart tool, charts for WeChat small app

Based on canvas rendering, small size

Chart types are supported

Pie chart pie

Donut chart ring

Line graph line

Bar chart column

Area map area

Code analysis Here

Parameter description

Opts Object

Opts.canvasId String required WeChat Mini Programs canvas-id

Opts.width Number required canvas width in px

Opts.height Number required canvas height in px

Opts.title Object (only for ring chart)

Opts.title.name String title content

Opts.title.fontSize Number title font size (optional, in px)

Opts.title.color String title color (optional)

Opts.subtitle Object (only for ring chart)

Opts.subtitle.name String subtitle content

Opts.subtitle.fontSize Number subtitle font size (optional, in px)

Opts.subtitle.color String subtitle color (optional)

Whether opts.animation Boolean default true is animated or not

Does opts.legend Boolen default true display various logos at the bottom of the chart?

Opts.type String required chart type. Available values are pie, line, column, area, ring

Opts.categories Array required (pie chart, donut chart is not required) data category classification

Whether opts.dataLabel Boolean default true displays the data content values in the chart

Does opts.dataPointShape Boolean default true display the graphical identity of data points in the chart?

Opts.xAxis Object X-axis configuration

Opts.xAxis.disableGrid Boolean default false does not draw X-axis grids

Opts.yAxis Object Y-axis configuration

Opts.yAxis.format Function custom Y-axis copy display

Opts.yAxis.min Number Y axis start value

Opts.yAxis.max Number Y axis termination value

Opts.yAxis.title String Y axis title

Opts.yAxis.disabled Boolean default false does not draw the Y axis

Opts.series Array required data list

Data list each structure definition

DataItem Object

DataItem.data Array required (pie chart, circle chart is Number) data

DataItem.color String, for example, if # 7cb5ec is not passed in, the default color scheme of the system is used.

DataItem.name String data name

DateItem.format Function Custom display data content

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: 'volume 1, data: 15,}, {name:' volume 2, data: 35,}, {name: 'volume 3, data: 78,}, {name:' volume 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:' volume 1', data: [0.15,0.2,0.45,0.37,0.4,0.8], format: function (val) {return val.toFixed (2) + 'ten thousand' }, {name: 'transaction volume 2 million, data: [0.30,0.37,0.65,0.78,0.69,0.94], format: function (val) {return val.toFixed (2) +' ten thousand';}}], yAxis: {title: 'transaction amount (ten thousand yuan)', 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: 'volume 1, data: [15, 20, 45, 37, 4, 80]}, {name:' volume 2, data: [70, 40, 65, 100, 34, 18]}] YAxis: {format: function (val) {return val + 'Wan' }}, 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: 'volume 1', data: [70, 40, 65, 100, 34, 18], format: function (val) {return val.toFixed (2) + 'ten thousand' }}, {name: 'trading volume 2 million, data: [15,20,45,37,4,80], format: function (val) {return val.toFixed (2) +' ten thousand';}}], yAxis: {format: function (val) {return val + 'ten thousand;}}, width: 320, height: 200})

These are all the contents of this article entitled "how to use the Chart plug-in wx-charts in WeChat Mini Programs". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.