實例詳解微信小程式圖表外掛程式wx-charts參數

微信小程式圖表外掛程式（wx-charts）基於canvas繪製，體積小巧支援圖表類型餅圖、線條圖、長條圖、區域圖等圖表圖形繪製，目前wx-charts是微信小程式圖表外掛程式中比較強大好使的一個，微信小程式圖表外掛wx-charts參數及使用教學。

wx-charts

支援圖表類型

圓餅圖 pie

線條圖 line

長條圖 column

區域圖 area

高清顯示

設定canvas的尺寸為2倍大小，然後縮小到50%，建議都進行這樣的設置，圖表本身繪製時是按照高清顯示配置的，不然整體效果會偏大

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

wx-charts參數說明

opts Object

opts.canvasId String required 微信小程式canvas-id

opts.width Number required canvas寬度，單位為px

opts.height Number required canvas高度，單位為px

opts.type String required 類型，可選值為pie, line, column, area

opts.categories Array required (圓餅圖不需要) 資料類別分類

opts.dataLabel Boolean default true 是否在圖表中顯示資料內容值

##opts .yAxis Object Y軸配置

opts.yAxis.format Function 自訂Y軸文案顯示

opts.yAxis.min Number Y軸起始值

opts.yAxis .title String Y軸title

opts.series Array required 資料清單

資料清單每項結構定義

##dataItem Object

##dataItem.data Array required (圓餅圖為Number) 資料

dataItem.color String 例如#7cb5ec 不傳入則使用系統預設配色方案

dataItem.name String 資料名稱

dateItem.format Function 自訂顯示資料內容

wx-charts圖表外掛範例

餅圖pie 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 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
});

長條圖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
});

區域圖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
});

以上是實例詳解微信小程式圖表外掛程式wx-charts參數的詳細內容。更多資訊請關注PHP中文網其他相關文章！