Detailed example of WeChat applet chart plug-in wx-charts parameters

The WeChat applet chart plug-in (wx-charts) is based on canvas drawing. It is small and supports chart types such as pie charts, line charts, histograms, and area charts. Currently, wx-charts is the most popular WeChat applet chart plug-in. A powerful and useful one, WeChat applet chart plug-in wx-charts parameters and usage tutorial.

wx-charts

Supported chart types

pie chart pie

line chart line

column chart column

区图area

High-definition display

Set the size of the canvas to 2 times the size, and then reduce it to 50%. It is recommended to make such settings. The chart itself is drawn according to the high-definition display configuration. , otherwise the overall effect will be too large

/* 例如设计图尺寸为320 x 300 */
.canvas {
    width: 640px;
    height: 600px;
    transform: scale(0.5)
}

wx-charts parameter description

opts Object

opts.canvasId String required WeChat applet canvas-id

opts.width Number required canvas width, unit is px

opts.height Number required canvas height, unit is px

opts.type String required chart type, optional values ​​are pie, line, column, area

opts.categories Array required (not required for pie chart) Data category classification

opts.dataLabel Boolean default true Whether to display the data content value in the chart

opts .yAxis Object Y-axis configuration

opts.yAxis.format Function Custom Y-axis text display

opts.yAxis.min Number Y-axis starting value

opts.yAxis .title String Y-axis title

opts.series Array required Data list

Data list each structure definition

dataItem Object

dataItem.data Array required (The pie chart is Number) Data

dataItem.color String For example, #7cb5ec If not passed in, the system default color scheme will be used

dataItem.name String Data name

dateItem.format Function custom display data content

wx-charts chart plug-in example

pie chartpie 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 chartline 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
});

histogram columnChart

new Charts({
    canvasId: 'columnCanvas',
    type: 'column',
    categories: ['2016-08', '2016-09', '2016-10', '2016-11', '2016-12', '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
});

area chart areaChart

new Charts({
    canvasId: 'areaCanvas',
    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
});

The above is the detailed content of Detailed example of WeChat applet chart plug-in wx-charts parameters. For more information, please follow other related articles on the PHP Chinese website!