2014-05-22
Chart.js是一个基于HTML5的canvas实现的数据可视化工具，可以可视化折线图（line chart）、柱状图（bar chart）、雷达图（radar chart）、饼图（pie chart）、极地区域图（polar area chart）、环形图（doughnut chart），官网是http://www.chartjs.org/。其源代码不多，很值得看一看。官方文档也很完善。
下面是一个官方的的示例（我稍微整理了一下）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="./Chart.min.js"></script>
</head>
<body>
<canvas id="myChart" width="400" height="300">你使用IE？</canvas>
<script type="text/javascript">
//Get the context of the canvas element we want to select
var ctx = document.getElementById("myChart").getContext("2d");
var data = {
labels : ["一月","二月","三月","四月","五月","六月","七月"],
datasets : [
{
fillColor : "rgba(220,220,220,0.5)",
strokeColor : "rgba(220,220,220,1)",
pointColor : "rgba(220,220,220,1)",
pointStrokeColor : "#fff",
data : [65,59,90,81,56,55,40]
},
{
fillColor : "rgba(151,187,205,0.2)",
strokeColor : "rgba(151,187,205,1)",
pointColor : "rgba(151,187,205,1)",
pointStrokeColor : "#fff",
data : [28,48,40,19,96,27,100]
}
]
}
var myNewChart = new Chart(ctx).Line(data);
</script>
</body>
</html>
保存为index.html，浏览器打开后效果图如下：
