用 chart.js 创建漂亮图表 （HTML绘制工具库）

chart.js ：开源免费图表组件，HTML绘制工具库

chart.js源码：https://github.com/nnnick/Chart.js

chart.js 英文文档：http://www.chartjs.org/docs/ （建议看英文手册）

chart.js 中文文档：http://www.bootcss.com/p/chart.js/docs/

先引入js文件，创造图表

<script src="Chart.min.js"></script>

<div style="width:400px;height:400px;">
<canvas id="myChart"></canvas>
</div>

曲线图JS代码（可以选择几条数据对比，也可以选择一条，背景颜色，线颜色都可以改，详情看手册）：

var ctx = document.getElementById("myChart").getContext('2d');
var data = {
	labels : ["January","February","March","April","May","June","July"],
	datasets : [
		{	
			label:'2017',
			backgroundColor:'rgba(40,161, 121, 0.1)',
			data : [65,59,90,81,56,55,40]
		},
		{	
			label:'2016',
			backgroundColor:'rgba(140,111, 121, 0.1)',
			data : [28,48,40,19,96,27,100]
		},
	],
	borderColor:"rgba(151,187,205,1)"
}
var myLineChart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        scales: {
            yAxes: [{
                tension: 0,
            }]
        }
    }
});

效果图：

可以点击筛选，显示单条数据

 把  type: 'line',改成  type: 'bar',就是柱状图：

把 type 改成 radar，就是 雷达图（蛛网图）：

把 type 改成 polarArea，就是极地区域图：

JS改成：    显示环形图

var data = {
	labels: [
        "February","March","April"
    ],
	datasets: [{
        data: [10, 20, 30],
        backgroundColor:["lightblue","lightgreen","#999999"]
    }],

	
}
var myLineChart = new Chart(ctx, {
    type: 'doughnut',
    data: data,
});

把环形图的type改成 pie 就是饼图

所有图形介绍完毕，用于简单的 图表完全够用。