Overview

想要在html5中绘制一些数据统计的图表，只需要选择一款js的插件，然后按照其要求的格式准备数据就可以了。

Javascript tool

http://www.shejidaren.com/js-chart-libraries.html
此文里面提到了大量的插件，挑选合适的一种就可以了。本文使用的chart.js

chart.js

官方网站：https://www.chartjs.org/

install

使用以下命令安装

npm install chart.js --save

or ，直接从Github上面下载源代码。

https://github.com/chartjs/Chart.js.git

需要注意，使用npm安装的时候，如果想要使用fill的功能，还必须下载对应的插件（其实就是一个js文件，从github上面下载源文件，然后在html文件上添加就可以了）

//从github上面下载文件
https://github.com/chartjs/Chart.js/blob/master/src/plugins/plugin.filler.js

//在html中引用
<script src="{% static 'chart.js/dist/plugin.filler.js' %}"></script>

Use

以下为详细的步骤：

1. 在html文件中添加这个js文件

<script src="{% static 'chart.js/dist/Chart.min.js' %}"></script>

2. 在html中定义一个canvas，chart.js都是基于canvas进行绘制的。大小自己调节。

<canvas id="myChart3" style="height:400px; width:1800px;margin:50px;"> </canvas>

3. 在javascript里面添加代码，这块是最主要的。

var option = {
    responsive: false,
    title: {
        display: true,
        text: 'Bugs Trend'
    }
};
canvas = document.getElementById("myChart3");
if(canvas){
    var ctx = document.getElementById("myChart3").getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: label_list,
            datasets: [
                {
                    label: "Open Bugs",
                    //backgroundColor: 'rgb(255, 255, 255)',
                    borderColor: 'rgb(255, 99, 132)',
                    lineTension: 0,
                    data: data1_list
                },
                {
                    label: "Total Bugs",
                    //backgroundColor: 'rgb(255, 255, 255)',
                    borderColor: 'rgb(91,192,222)',
                    lineTension: 0,
                    data: data2_list
                },
                {
                    label: "Closed Bugs",
                    //backgroundColor: 'rgb(255, 255, 255)',
                    borderColor: 'rgb(99, 192, 99)',
                    backgroundColor: 'rgb(239, 235, 163, 0.5)',
                    lineTension: 0,
                    fill: '-1',
                    data: data3_list
                }
            ]
        },
        options: option          
    });
}    

其中label_list, data1_list, data2_list, data3_list均为我们事先准备好的数组。在第三组数据中的“fill: '-1'”就是plugin.filler.js这个文件中提供的功能，主要的作用就是用特定的颜色填充两组数据之间的空隙。
以下为效果图：

bug_trend.png