Chart.js
是一個簡單、面向對象、為設計者和開發者準備的圖表繪製工具庫。
幫你用不同的方式讓你的數據變得可視化。每種類型的圖表都有動畫效果，並且看上去非常棒，即便是在retina屏幕上。
基於HTML5 canvas技術，支持所有現代瀏覽器，並且針對IE7/8提供了降級替代方案。
不依賴任何外部工具庫，輕量級（壓縮之後僅有4.5k），並且提供了加載外部參數的方法。
下面是Chart.js的應用示例：
1引入Chart.js文件
首先我們需要在頁面中引入Chart.js文件。此工具庫在全局命名空間中定義了Chart變量
<script type="text/javascript" src="js/Chart.min.js"></script>
2 創建圖表
為了創建圖表，我們要實例化一個Chart對象。為了完成前面的步驟，首先需要需要傳入一個繪製圖表的2d context。以下是案例。
Html
<canvas id="canvas1" height="450" width="600"></canvas>
Js：
var ctx1 = new Chart(document.getElementById("canvas1").getContext("2d"));
var options = {scaleFontSize: 13, scaleFontColor: "#ffa45e"};
var myLineChart = ctx1.Line(LineChart, options);
當我們完成了在指定的canvas上實例化Chart對象之後，Chart.js會自動針對retina屏幕做縮放。
Chart對象設置完成後，我們就可以繼續創建Chart.js中提供的具體類型的圖表了
3 曲線圖（Line chart）
簡介
曲線圖就是將數據標於曲線上的一種圖表。
一般用於展示趨勢數據，和比較兩組數據集。
使用案例
數據結構
<canvas id="canvas1" height="450" width="600"></canvas>
var ctx1 = new Chart(document.getElementById("canvas1").getContext("2d"));
var options = {scaleFontSize: 13, scaleFontColor: "#ffa45e"};
// 線型圖
var LineChart = {
labels: ["Ruby", "jQuery", "Java", "ASP.Net", "PHP"],
datasets: [{
fillColor: "rgba(151,249,190,0.5)",
strokeColor: "rgba(255,255,255,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
data: [100, 200, 300, 400, 550]
}, {
fillColor: "rgba(252,147,65,0.5)",
strokeColor: "rgba(255,255,255,1)",
pointColor: "rgba(173,173,173,1)",
pointStrokeColor: "#fff",
data: [28, 68, 40, 19, 96]
}]
};
var myLineChart = ctx1.Line(LineChart, options);
4 條形圖（Bar chart）
簡介
條形圖是將數據顯示為條形圖的一種方法。
它有時用來顯示趨勢數據，同時比較多個數據集。
使用案例
數據結構
<canvas id="canvas2" height="450" width="600"></canvas>
var ctx2 = new Chart(document.getElementById("canvas2").getContext("2d"));
var options = {scaleFontSize: 13, scaleFontColor: "#ffa45e"};
// 條形圖
var BarChart = {
labels: ["Ruby", "jQuery", "Java", "ASP.Net", "PHP"],
datasets: [{
fillColor: "rgba(151,249,190,0.5)",
strokeColor: "rgba(255,255,255,1)",
data: [13, 20, 30, 40, 50]
}, {
fillColor: "rgba(252,147,65,0.5)",
strokeColor: "rgba(255,255,255,1)",
data: [28, 68, 40, 19, 96]
}]
};
var myBarChart = ctx2.Bar(BarChart, options);
5 餅圖（Pie chart）
簡介
餅圖可能是最常用的圖表。它們被劃分為段，每個段的弧顯示每一段數據的比例值。
他們擅長顯示數據之間的關係比例。
使用案例
數據結構
<canvas id="canvas3" height="450" width="600"></canvas>
var ctx3 = new Chart(document.getElementById("canvas3").getContext("2d"));
var options = {scaleFontSize: 13, scaleFontColor: "#ffa45e"};
// 餅狀圖
var pieChart = [
{value: 40, color: "#fcc79c", highlight: "#AD0A56", label: "SCI"},
{value: 30, color: "#beefd2", highlight: "#AD0A56", label: "SSCI"},
{value: 90, color: "#ffddfb", highlight: "#AD0A56", label: "Others"},
];
var myPieChart = ctx3.Pie(pieChart);
6 環形圖（Doughnut chart）
簡介
環形圖表與餅圖相似，但它們有中心切割，因此形狀更像油炸圈餅而不是餡餅！
他們善於展示數據之間的關係比例。
使用案例
數據結構
<canvas id="canvas4" height="450" width="600"></canvas>
var ctx4 = new Chart(document.getElementById("canvas4").getContext("2d"));
var options = {scaleFontSize: 13, scaleFontColor: "#ffa45e"};
// 環狀圖
var doughnutChart = [
{value: 60, color: "#fcc79e", highlight: "#AD0A56", label: "SCI"},
{value: 30, color: "#beefd2", highlight: "#AD0A56", label: "SSCI"},
{value: 50, color: "#ffddfb", highlight: "#AD0A56", label: "Others"},
{value: 120, color: "#cdecff", highlight: "#AD0A56", label: "TEST"},
{value: 90, color: "#fff5bc", highlight: "#AD0A56", label: "ADD"}
];
var myRingChart = ctx4.Doughnut(doughnutChart);
7 瀏覽器支持
所有現代瀏覽器和大部分手機瀏覽器都支持canvas
對於IE8及以下版本的瀏覽器，建議使用ExplorerCanvas。對於不支持canvas的IE會自動降級為VML格式。使用下面方法，excamvas.js可以在下面網址
http://www.bvbcode.com/cn/yk51lwhx-894917-down
<head>
<!--[if lte IE 8]>
<script src="excanvas.js"></script>
<![endif]-->
</head>
附，下面是完整的html代碼：
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="js/Chart.min.js"></script>
</head>
<body>
<canvas id="canvas1" height="450" width="600"></canvas>
<canvas id="canvas2" height="450" width="600"></canvas>
<canvas id="canvas3" height="450" width="600"></canvas>
<canvas id="canvas4" height="450" width="600"></canvas>
<script type="text/javascript">
var ctx1 = new Chart(document.getElementById("canvas1").getContext("2d"));
var ctx2 = new Chart(document.getElementById("canvas2").getContext("2d"));
var ctx3 = new Chart(document.getElementById("canvas3").getContext("2d"));
var ctx4 = new Chart(document.getElementById("canvas4").getContext("2d"));
var options = {scaleFontSize: 13, scaleFontColor: "#ffa45e"};
// 線型圖
var LineChart = {
labels: ["Ruby", "jQuery", "Java", "ASP.Net", "PHP"],
datasets: [{
fillColor: "rgba(151,249,190,0.5)",
strokeColor: "rgba(255,255,255,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
data: [100, 200, 300, 400, 550]
}, {
fillColor: "rgba(252,147,65,0.5)",
strokeColor: "rgba(255,255,255,1)",
pointColor: "rgba(173,173,173,1)",
pointStrokeColor: "#fff",
data: [28, 68, 40, 19, 96]
}]
};
var myLineChart = ctx1.Line(LineChart, options);
// 條形圖
var BarChart = {
labels: ["Ruby", "jQuery", "Java", "ASP.Net", "PHP"],
datasets: [{
fillColor: "rgba(151,249,190,0.5)",
strokeColor: "rgba(255,255,255,1)",
data: [13, 20, 30, 40, 50]
}, {
fillColor: "rgba(252,147,65,0.5)",
strokeColor: "rgba(255,255,255,1)",
data: [28, 68, 40, 19, 96]
}]
};
var myBarChart = ctx2.Bar(BarChart, options);
// 餅狀圖
var pieChart = [
{value: 40, color: "#fcc79c", highlight: "#AD0A56", label: "SCI"},
{value: 30, color: "#beefd2", highlight: "#AD0A56", label: "SSCI"},
{value: 90, color: "#ffddfb", highlight: "#AD0A56", label: "Others"},
];
var myPieChart = ctx3.Pie(pieChart);
// 環狀圖
var doughnutChart = [
{value: 60, color: "#fcc79e", highlight: "#AD0A56", label: "SCI"},
{value: 30, color: "#beefd2", highlight: "#AD0A56", label: "SSCI"},
{value: 50, color: "#ffddfb", highlight: "#AD0A56", label: "Others"},
{value: 120, color: "#cdecff", highlight: "#AD0A56", label: "TEST"},
{value: 90, color: "#fff5bc", highlight: "#AD0A56", label: "ADD"}
];
var myRingChart = ctx4.Doughnut(doughnutChart);
</script>
</body>
</html>