Example description WeChat applet chart plug-in wx-charts parameters

The applet chart plug-in (wx-charts) is drawn based on canvas. it is small in size and supports Chart chart types such as pie chart, line chart, column chart, and area chart, currently, wx-charts is a powerful component of the applet chart plug-in. the wx-charts parameter and usage tutorial of the applet chart plug-in are as follows. The applet chart plug-in (wx-charts) is drawn based on canvas. it is small in size and supports Chart chart types such as pie chart, line chart, column chart, and area chart, currently, wx-charts is a powerful component of the applet chart plug-in. the wx-charts parameter and usage tutorial of the applet chart plug-in are as follows.

Wx-charts

Supported chart types

Pie chart pie

Line chart

Column chart

Area Chart area

HD display

Set the size of the canvas to 2 times, and then scale down to 50%. we recommend that you set the size of the canvas according to the high-definition display settings when creating the chart. Otherwise, the overall effect will be too large.

/* For example, the design drawing size is 320x300 */. canvas {width: 640px; height: 600px; transform: scale (0.5 )}

Wx-charts parameter description

Opts Object

Opts. canvasId String required applet canvas-id

Opts. width Number required canvas width, in px

Opts. height Number required canvas height, in px

Opts. type String required chart type. optional values: pie, line, column, and area

Opts. categories Array required (not required for pie charts) data category classification

Opts. dataLabel Boolean default true whether the data content value is displayed in the chart

Opts. yAxis Object Y axis configuration

Opts. yAxis. format Function custom y-axis text display

Opts. yAxis. min Number start value of the y axis

Opts. yAxis. title String y axis title

Opts. series Array required data list

Definition of each structure in the data list

DataItem Object

DataItem. data Array required (the pie chart is Number) data

DataItem. color String. for example, if # 7cb5ec is not input, the default color scheme is used.

DataItem. name String data name

DateItem. format Function custom display data content

Wx-charts chart plug-in example

Pie chart

Var Charts = require ('Charts. js'); new Charts ({canvasId: 'piecanca', type: 'pie', series: [{name: 'transaction Volume 1', data: 15,}, {name: 'transaction Volume 2', data: 35, },{ name: 'transaction Volume 3', data: 78, },{ name: 'transaction Volume 4', data: 63,}], width: 640, height: 400, dataLabel: false });

Line chart

New Charts ({canvasId: 'linecanca', type: 'line', categories: ['20160301', '20160301', '20160301', '20160301 ', '000000'], series: [{name: 'transaction Volume 1', data: [2017, 0.15, 0.2, 0.45, 0.37], format: function (val) {return val. toFixed (2) + 'wan' ;},{ name: 'transaction Volume 2', data: [0.30, 0.37, 0.65, 0.78, 0.69, 0.94], format: function (val) {return val. toFixed (2) + '000000';}], yAxis: {title: 'transaction amount (CNY) ', format: function (val) {return val. toFixed (2) ;}, min: 0}, width: 640, height: 400 });

Column chart columnChart

New Charts ({canvasId: 'columncanvas ', type: 'column', categories: ['2017-08', '2017-09 ', '2017-10 ', '2017-11', '2017-12', '20170901'], series: [{name: 'transaction Volume 1', data: [15, 20, 45, 37, 4, 80]}, {name: 'transaction Volume 2', data: [70, 40, 65,100, 34, 18]}, {name: 'transaction Volume 3', data: [70, 40, 65,100, 34, 18]}, {name: 'transaction Volume 4', data: [70, 40, 65,100, 34, 18]}], yAxis: {format: function (val) {return val + 'wan' ;}}, width: 640, height: 400, dataLabel: false });

Region chart areaChart

New Charts ({canvasId: 'areacanca', type: 'area', categories: ['2017-08 ', '2017-09', '2017-10 ', '2017-11', '2017-12', '20170901'], series: [{name: 'transaction Volume 1', data: [70, 40, 2016, 34, 18], format: function (val) {return val. toFixed (2) + 'wan' ;},{ name: 'transaction Volume 2', data: [15, 20, 45, 37, 4, 80], format: function (val) {return val. toFixed (2) + 'wan ';}}], yAxis: {format: function (val) {return val + 'wan' ;}}, width: 640, height: 400 });

The above is the details about the wx-charts parameter of the applet chart plug-in. For more information, see other related articles in the first PHP community!