知識 分享 互助 懶人建站

    懶人建站專注于網頁素材下載,提供網站模板、網頁設計、ps素材、圖片素材等,服務于【個人站長】【網頁設計師】和【web開發從業者】的代碼素材與設計素材網站。

    懶人建站提供網頁素材下載、網站模板
    知識 分享 互助!

    微信小程序圖表插件(wx-charts)

    作者:佳明媽 來源:github 2016-12-01 人氣:
    微信小程序圖表插件(wx-charts)基于canvas繪制,體積小巧支持圖表類型餅圖、線圖、柱狀圖 、區域圖等圖表圖形繪制,目前wx-charts是微信小程序圖表插件中比較強大好使的一個。

    微信小程序圖表插件(wx-charts)基于canvas繪制,體積小巧支持圖表類型餅圖、線圖、柱狀圖 、區域圖等圖表圖形繪制,目前wx-charts是微信小程序圖表插件中比較強大好使的一個。

    wx-charts基于canvas繪制的微信小程序圖表插件

    支持圖表類型

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

    pieChart

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

    lineChart

    柱狀圖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
    });

    columnChart

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

    areaChart

    項目地址及下載:

    https://github.com/xiaolin3303/wx-charts

    ↓ 查看全文

    微信小程序圖表插件(wx-charts)由懶人建站收集整理,您可以自由傳播,請主動帶上本文鏈接

    懶人建站就是免費分享,覺得有用就多來支持一下,沒有能幫到您,懶人也只能表示遺憾,希望有一天能幫到您。

    微信小程序圖表插件(wx-charts)-最新評論

    • 小馬哥 山東省 2017-08-25 09:19:54
      帶前后端源碼+數據庫導入,代部署9,V: aijiaxiaoxue
    • Jquery特效 河南省鄭州市 2017-04-09 05:07:06
      微信小程序圖表插件(wx-charts)基于canvas繪制,體積小巧支持圖表類型餅圖、線圖、柱狀圖 、區域圖等圖表圖形繪制
    • 懶人建站網友 2016-12-08 09:49:47
      真機界面寬高度自適應不了,如把chart圖放在i6和i5里,顯示樣式會不一樣,由于i5的界面比較小,所以chart圖顯示不全
    • 11 2016-12-08 09:12:47
      真機界面寬高度自適應不了,如把chart圖放在i6和i5里,顯示樣式會不一樣,由于i5的界面比較小,所以chart圖顯示不全
    老子是皇帝在线客服