使用說明
安裝 npm install
gulp build 生成/Chart.js-master/dist/Chart.min.js檔案
使用壓縮合並版本
開啟 dev/page/canvas/chart.js
註釋 import Chart from ‘../../Chart.js-master/src/chart’
開啟 import Chart from ‘../../Chart.js-master/dist/Chart.min’
IDE效果

適配案例
bar

doughnut.png

line

line-multi-axis

pie

point-styles

專案結構：

/**

 *
Created by
xiabingwu on
2016/11/21.

 */

import Chart from
'../canvas/chart'

export default function(canvasConfig){

    var chartColors =
{

        red:
'rgb(255,
99,
132)',

        orange:
'rgb(255,
159,
64)',

        yellow:
'rgb(255,
205,
86)',

        green:
'rgb(75,
192,
192)'
 
,

        blue:
'rgb(54,
162,
235)',

        purple:
'rgb(153,
102,
255)',

        grey:
'rgb(231,233,237)'

    };



    var randomScalingFactor =
function ()
{

        return
(Math.random()
>  0.5  ? 1.0
:  -1.0)
*  Math.round(Math.random()
*  100);

    }

    var randomScalingFactor =
function
 
()
{

        return
Math.round(Math.random()
*  100);

    };



    var chartConfig =
{

        type:
'doughnut',

        data:
{

            datasets:
[{

                data:
[

                    randomScalingFactor(),

                    randomScalingFactor(),

                    randomScalingFactor(),

                    randomScalingFactor(),

                    randomScalingFactor(),

                ],

                backgroundColor:
[

                    chartColors.red,

                    chartColors.orange,

                    chartColors.yellow,

                    chartColors.green,

                    chartColors.blue,

                ],

                label:
'Dataset 1'

            }],

            labels:
[

                "Red",

                "Orange",

                "Yellow",

                "Green",

                "Blue"

            ]

        },

        options:
{

            responsive:
false,

            legend:
{

                position:
'top',

            },

            title:
{

                display:
true,

                text:
'Chart.js Doughnut Chart'

            },

            animation:
{

                animateScale:
true,

                animateRotate:
true

            }

        }

    };

    return
{

        chartConfig:chartConfig,

        canvasConfig:canvasConfig

    }

}

專案地址及下載：
本帖隱藏的內容
https://github.com/xiabingwu/chartjs-wechat-mini-app
chartjs-wechat-mini-app-master.zip (295.64 KB, 下載次數: 10)
想要獲取跟多微信小程式開發原始碼和元件和視訊
拿出手機掃一掃就可以啦，