入門基礎(chǔ)

Chart.js是一個(gè)基于HTML5的開源圖表庫，可以方便簡潔的繪制美觀的圖表。

主要特性包括：

1、支持6種不同的表格類型：曲線圖、柱狀圖、餅狀圖、雷達(dá)圖、極坐標(biāo)區(qū)域圖、環(huán)圖。
2、基于HTML5開發(fā)，支持所有瀏覽器（包括IE7/8）.
3、不依賴于其他任何庫，僅有4.5k大小，并且可以進(jìn)行定制。

Chart.js 是一個(gè)基于 HTML5 canvas 的響應(yīng)式、靈活的、輕量化的圖表庫。庫中提供了六種不同的圖表類型，每種類型都帶有一系列的自定義選項(xiàng)。如果這些還不夠，你還可以創(chuàng)造自己的圖表類型。

Chart.js 的六種圖表類型代碼一共只有 11 kb 大，并做了 gzip 壓縮處理，另外該庫是模塊化的，你可以僅僅使用自己需要的圖表類型，從而進(jìn)一步節(jié)省了空間。下面是包含該庫的 cdnjs 鏈接。

JavaScript

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>

可用的設(shè)置項(xiàng)

從提示信息到動畫效果（校稿者注：tool tip是指鼠標(biāo)移動到某個(gè)元素上彈出的提示信息），Chart.js 允許你改變圖表的幾乎所有特征。在本節(jié)，我將會修改一些設(shè)置，以展示 Chart.js 是如何被創(chuàng)建出來的。我們將從下面的 HTML 代碼開始：

XHTML

<canvas id="canvas"></canvas>

對于首次展示，我會創(chuàng)建一個(gè)折線圖。為了使圖表有意義，這里會有幾個(gè)需要設(shè)置的基本選項(xiàng)。折線圖需要一個(gè)標(biāo)簽數(shù)組和數(shù)據(jù)集。標(biāo)簽會顯示在 X 軸。我已經(jīng)為折線圖模擬了一些數(shù)據(jù)，這些數(shù)據(jù)被分開放到一個(gè)數(shù)組里面去，每個(gè)數(shù)據(jù)有自己的填充顏色、折線和點(diǎn)集。

在這個(gè)例子中，我將 fillColor設(shè)置為透明。如果你不設(shè)置 fillColor 的值，將默認(rèn)設(shè)置為黑色或者灰色。這同樣適用于其他值。色彩使用 RGBA、RGB、hex 或 HSL 格式定義，與 CSS 是一樣的。

JavaScript

var lineData = {
 labels: ['Data 1', 'Data 2', 'Data 3', 'Data 4', 
      'Data 5', 'Data 6', 'Data 7'],
 datasets: [{
  fillColor: 'rgba(0,0,0,0)',
  strokeColor: 'rgba(220,180,0,1)',
  pointColor: 'rgba(220,180,0,1)',
  data: [20, 30, 80, 20, 40, 10, 60]
 }, {
  fillColor: 'rgba(0,0,0,0)',
  strokeColor: 'rgba(151,187,205,1)',
  pointColor: 'rgba(151,187,205,1)',
  data: [60, 10, 40, 30, 80, 30, 20]
 }]
}

設(shè)置全局選項(xiàng)

在代碼中我已經(jīng)設(shè)置了一些全局值。animationSteps 決定了動畫的持續(xù)時(shí)間。根據(jù)需要，你可以修改更多的選項(xiàng)，比如 scaleLineColor 和 scaleIntegersOnly。我建議瀏覽 Chart.js 文檔查看庫中提供的其他選項(xiàng)。

JavaScript

Chart.defaults.global = {
 animationSteps : 50,
 tooltipYPadding : 16,
 tooltipCornerRadius : 0,
 tooltipTitleFontStyle : 'normal',
 tooltipFillColor : 'rgba(0,160,0,0.8)',
 animationEasing : 'easeOutBounce',
 scaleLineColor : 'black',
 scaleFontSize : 16
}

設(shè)置專有的圖表選項(xiàng)

除了全局選項(xiàng)，還有一些針對特定圖表類型的配置選項(xiàng)。在這個(gè)折線圖中，我將會設(shè)置這類選項(xiàng)，希望對你有所啟發(fā)：

JavaScript

Chart.defaults.global = {
animationSteps : 50,
tooltipYPadding : 16,
tooltipCornerRadius : 0,
tooltipTitleFontStyle : 'normal',
tooltipFillColor : 'rgba(0,160,0,0.8)',
animationEasing : 'easeOutBounce',
scaleLineColor : 'black',
scaleFontSize : 16
}

Chart.js 生成的圖表默認(rèn)為非響應(yīng)式。將 responsive 設(shè)置為 true 可以使其轉(zhuǎn)化為響應(yīng)式圖表。如果你需要讓每個(gè)圖表都成為響應(yīng)式的，我推薦設(shè)置全局值，就像這樣：

JavaScript

Chart.defaults.global.responsive = true;

下面你會看見這個(gè)折線圖的示例：

See the Pen Chart.js Responsive Line Chart Demo by SitePoint (@SitePoint) on CodePen.

增加與移除動態(tài)數(shù)據(jù)

有時(shí)你需要展示時(shí)刻變化的數(shù)據(jù)。股票市場便是這個(gè)應(yīng)用場景的典型例子。這本節(jié)中我將會創(chuàng)建一個(gè)柱形圖，并且在動態(tài)刪除數(shù)據(jù)的同時(shí)增加數(shù)據(jù)。我會使用一些隨機(jī)數(shù)據(jù)，并在這個(gè)例子中通過柱形圖來展示數(shù)據(jù)。本例中的大部分代碼與上一個(gè)例子相似。一旦我們擁有自己的 HTML（與上一個(gè)例子一樣），便可以添加自己的 JavaScript。

首先我們需要編寫代碼將動態(tài)數(shù)據(jù)填充進(jìn)圖表。我使用function表達(dá)式生成隨機(jī)值，然后將其賦給一個(gè)變量 dData。這些值會在需要變化時(shí)為我們提供隨機(jī)的數(shù)據(jù)。像之前的例子一樣，我創(chuàng)建了一個(gè)標(biāo)簽數(shù)組和數(shù)據(jù)集，并設(shè)置了一個(gè)任意的 fillColor。

JavaScript

var dData = function() {
 return Math.round(Math.random() * 90) + 10;
};
var barData = {
 labels: ['dD 1', 'dD 2', 'dD 3', 'dD 4',
      'dD 5', 'dD 6', 'dD 7', 'dD 8'],
 datasets: [{
  fillColor: 'rgba(0,60,100,1)',
  strokeColor: 'black',
  data: [dData(), dData(), dData(), dData(),
      dData(), dData(), dData(), dData()]
 }]
}

現(xiàn)在是時(shí)候編寫代碼來為我們的圖表刪除與添加柱形了。開始時(shí)我們初始化 index 的值為 11，我使用了兩個(gè)方法：removeData() 和 addData(valuesArray,label)。調(diào)用實(shí)例的 removeData() 方法刪除圖表所有數(shù)據(jù)集的第一個(gè)值。在 barChartDemo 這個(gè)例子中，數(shù)據(jù)集的第一個(gè)值被移除了。調(diào)用 addData() 順著標(biāo)簽傳遞一個(gè)數(shù)組值，在圖表的最后增加一個(gè)新的數(shù)據(jù)節(jié)點(diǎn)。下面的代碼片段每 3 秒鐘會更新一次圖表。

JavaScript

var index = 11;
var ctx = document.getElementById('canvas').getContext('2d');
var barDemo = new Chart(ctx).Bar(barData, {
 responsive: true
});
setInterval(function() {
 barDemo.removeData();
 barDemo.addData([dData()], 'dD ' + index);
 index++;
}, 3000);

另一個(gè)更新圖表數(shù)值的方法是直接設(shè)置數(shù)值。在下面的例子中，第一行是將第一個(gè)數(shù)據(jù)集的第二個(gè)柱形的數(shù)值設(shè)為 60。如果你在這時(shí)更新，柱形會通過動畫將其當(dāng)前值變?yōu)?60。

JavaScript

barDemo.datasets[0].bars[2].value = 60;
barDemo.update();

這里是柱形圖的示例（由SitePoint在CodePen上創(chuàng)建）：

See the Pen Chart.js Responsive Bar Chart Demo by SitePoint (@SitePoint) on CodePen.

結(jié)論

這個(gè)教程覆蓋了關(guān)于 Chart.js 的一些重要功能。第一個(gè)例子展示了一些全局設(shè)置的使用，同時(shí)，Chart.js也為每個(gè)圖表類型提供了專屬的自定義設(shè)置。如果當(dāng)前可用的圖表無法滿足你的需求，你還可以創(chuàng)造自己的圖表類型。我推薦你瀏覽文檔，加深關(guān)于該庫什么可以做，什么無法做的認(rèn)識。

最新評論