使用Chart.js圖表庫製作漂亮的響應式表單_javascript技巧-js教程-PHP中文網

入門基礎

Chart.js是一個基於HTML5的開源圖表庫，可以方便簡潔的繪製美觀的圖表。

主要特性包括：

1.支援6種不同的表格類型：曲線圖、長條圖、餅狀圖、雷達圖、極座標區域圖、環圖。
2、基於HTML5開發，支援所有瀏覽器（包括IE7/8）.
3、不依賴其他任何函式庫，僅有4.5k大小，並且可以進行自訂。

Chart.js 是一個基於 HTML5 canvas 的響應式、靈活的、輕量化的圖表庫。庫中提供了六種不同的圖表類型，每種類型都帶有一系列的自訂選項。如果這些還不夠，你還可以創造自己的圖表類型。

Chart.js 的六種圖表類型代碼一共只有 11 kb 大，並做了 gzip 壓縮處理，另外該庫是模組化的，你可以僅僅使用自己需要的圖表類型，從而進一步節省了空間。下面是包含該函式庫的 cdnjs 連結。

JavaScript

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

登入後複製

可用的設定項

從提示訊息到動畫效果（校稿者註：tool tip是指滑鼠移動到某個元素上彈出的提示訊息），Chart.js 允許你改變圖表的幾乎所有特徵。在本節，我將會修改一些設置，以展示 Chart.js 是如何被建立出來的。我們將從下面的 HTML 程式碼開始：

XHTML

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

登入後複製

對於首次展示，我會建立一個折線圖。為了讓圖表有意義，這裡會有幾個需要設定的基本選項。折線圖需要一個標籤數組和資料集。標籤會顯示在 X 軸。我已經為折線圖模擬了一些數據，這些數據被分開放到一個數組裡面去，每個數據都有自己的填充顏色、折線和點集。

在這個範例中，我將 fillColor設定為透明。如果你不設定 fillColor 的值，將預設為黑色或灰色。這同樣適用於其他值。色彩使用 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]
 }]
}

登入後複製

設定全域選項

在程式碼中我已經設定了一些全域值。 animationSteps 決定了動畫的持續時間。根據需要，你可以修改更多的選項，例如 scaleLineColor 和 scaleIntegersOnly。我建議瀏覽 Chart.js 文件以查看庫中提供的其他選項。

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
}

登入後複製

設定專有的圖表選項

除了全域選項，還有一些針對特定圖表類型的設定選項。在這個折線圖中，我將會設定這類選項，希望能對你有所啟發：

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 產生的圖表預設為非響應式。將 responsive 設為 true 可以使其轉換為響應式圖表。如果你需要讓每個圖表都成為響應式的，我建議設定全域值，就像這樣：

JavaScript

Chart.defaults.global.responsive = true;

登入後複製

下面你會看見這個折線圖的範例：

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

登入後複製

增加與移除動態資料

有時你需要展示時刻變化的數據。股票市場便是這個應用場景的典型例子。這本節我將會建立一個長條圖，並且在動態刪除資料的同時增加資料。我會使用一些隨機數據，並在這個例子中透過長條圖來展示數據。本例中的大部分代碼與上一個例子相似。一旦我們擁有自己的 HTML（與上一個例子一樣），便可以添加自己的 JavaScript。

首先我們需要編寫程式碼將動態資料填入圖表。我使用function表達式產生隨機值，然後將其賦給一個變數 dData。這些值會在需要變化時為我們提供隨機的數據。像之前的例子一樣，我創建了一個標籤數組和資料集，並設定了一個任意的 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()]
 }]
}

登入後複製

現在是時候編寫程式碼來為我們的圖表刪除與添加柱形了。一開始我們初始化 index 的值為 11，我使用了兩個方法：removeData() 和 addData(valuesArray,label)。呼叫實例的 removeData() 方法刪除圖表所有資料集的第一個值。在 barChartDemo 這個例子中，資料集的第一個值被移除了。呼叫 addData() 順著標籤傳遞一個陣列值，在圖表的最後增加一個新的資料節點。下面的程式碼片段每 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);

登入後複製

另一個更新圖表數值的方法是直接設定數值。在下面的例子中，第一行是將第一個資料集的第二個柱形的數值設為 60。如果你在這時更新，柱形會透過動畫將其目前值變為 60。

JavaScript

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

登入後複製

这里是柱形图的示例（由SitePoint在CodePen上创建）：

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

登入後複製

结论

这个教程覆盖了关于 Chart.js 的一些重要功能。第一个例子展示了一些全局设置的使用，同时，Chart.js也为每个图表类型提供了专属的自定义设置。如果当前可用的图表无法满足你的需求，你还可以创造自己的图表类型。我推荐你浏览文档，加深关于该库什么可以做，什么无法做的认识。