Detailed example of WeChat applet chart plug-in wx-charts parameters-Mini Program Development-php.cn

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

Y2J

Release： 2017-05-02 11:01:21

Original

2694 people have browsed it

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)
}

Copy after login

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(&#39;charts.js&#39;);
new Charts({
    canvasId: &#39;pieCanvas&#39;,
    type: &#39;pie&#39;,
    series: [{
        name: &#39;成交量1&#39;,
        data: 15,
    }, {
        name: &#39;成交量2&#39;,
        data: 35,
    }, {
        name: &#39;成交量3&#39;,
        data: 78,
    }, {
        name: &#39;成交量4&#39;,
        data: 63,
    }],
    width: 640,
    height: 400,
    dataLabel: false
});

Copy after login

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

line chartline chart

new Charts({
    canvasId: &#39;lineCanvas&#39;,
    type: &#39;line&#39;,
    categories: [&#39;2012&#39;, &#39;2013&#39;, &#39;2014&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],
    series: [{
        name: &#39;成交量1&#39;,
        data: [0.15, 0.2, 0.45, 0.37, 0.4, 0.8],
        format: function (val) {
            return val.toFixed(2) + &#39;万&#39;;
        }
    }, {
        name: &#39;成交量2&#39;,
        data: [0.30, 0.37, 0.65, 0.78, 0.69, 0.94],
        format: function (val) {
            return val.toFixed(2) + &#39;万&#39;;
        }
    }],
    yAxis: {
        title: &#39;成交金额 (万元)&#39;,
        format: function (val) {
            return val.toFixed(2);
        },
        min: 0
    },
    width: 640,
    height: 400
});

Copy after login

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

histogram columnChart

new Charts({
    canvasId: &#39;columnCanvas&#39;,
    type: &#39;column&#39;,
    categories: [&#39;2016-08&#39;, &#39;2016-09&#39;, &#39;2016-10&#39;, &#39;2016-11&#39;, &#39;2016-12&#39;, &#39;2017&#39;],
    series: [{
        name: &#39;成交量1&#39;,
        data: [15, 20, 45, 37, 4, 80]
    }, {
        name: &#39;成交量2&#39;,
        data: [70, 40, 65, 100, 34, 18]
    }, {
        name: &#39;成交量3&#39;,
        data: [70, 40, 65, 100, 34, 18]
    }, {
        name: &#39;成交量4&#39;,
        data: [70, 40, 65, 100, 34, 18]
    }],
    yAxis: {
        format: function (val) {
            return val + &#39;万&#39;;
        }
    },
    width: 640,
    height: 400,
    dataLabel: false
});

Copy after login

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

area chart areaChart

new Charts({
    canvasId: &#39;areaCanvas&#39;,
    type: &#39;area&#39;,
    categories: [&#39;2016-08&#39;, &#39;2016-09&#39;, &#39;2016-10&#39;, &#39;2016-11&#39;, &#39;2016-12&#39;, &#39;2017&#39;],
    series: [{
        name: &#39;成交量1&#39;,
        data: [70, 40, 65, 100, 34, 18],
        format: function (val) {
            return val.toFixed(2) + &#39;万&#39;;
        }
    }, {
        name: &#39;成交量2&#39;,
        data: [15, 20, 45, 37, 4, 80],
        format: function (val) {
            return val.toFixed(2) + &#39;万&#39;;
        }
    }],
    yAxis: {
        format: function (val) {
            return val + &#39;万&#39;;
        }
    },
    width: 640,
    height: 400
});

Copy after login

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!