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!