Chart.js創(chuàng)建漂亮圖表的所有知識(shí)

Chart.js 中文文檔地址：http://www.bootcss.com/p/chart.js/docs/



引入Chart.js文件

首先我們需要在頁面中引入Chart.js文件。此工具庫在全局命名空間中定義了Chart變量。

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

創(chuàng)建圖表

為了創(chuàng)建圖表，我們要實(shí)例化一個(gè)Chart對(duì)象。為了完成前面的步驟，首先需要需要傳入一個(gè)繪制圖表的2d context。以下是案例。

<canvas id="myChart" width="400" height="400"></canvas>

//Get the context of the canvas element we want to select
var ctx = document.getElementById("myChart").getContext("2d");
var myNewChart = new Chart(ctx).PolarArea(data);

我們還可以用jQuery獲取canvas的context。首先從jQuery集合中獲取我們需要的DOM節(jié)點(diǎn)，然后在這個(gè)DOM節(jié)點(diǎn)上調(diào)用 getContext("2d") 方法。

//Get context with jQuery - using jQuery's .get() method.
var ctx = $("#myChart").get(0).getContext("2d");
//This will get the first returned node in the jQuery collection.
var myNewChart = new Chart(ctx);

當(dāng)我們完成了在指定的canvas上實(shí)例化Chart對(duì)象之后，Chart.js會(huì)自動(dòng)針對(duì)retina屏幕做縮放。

Chart對(duì)象設(shè)置完成后，我們就可以繼續(xù)創(chuàng)建Chart.js中提供的具體類型的圖表了。下面這個(gè)案例中，我們將展示如何繪制一幅極地區(qū)域圖（Polar area chart）。

new Chart(ctx).PolarArea(data,options);

We call a method of the name of the chart we want to create. We pass in the data for that chart type, and the options for that chart as parameters. Chart.js will merge the options you pass in with the default options for that chart type.