如何使用 Chart.js 在 JavaScript 中制作圖表？
本文是關于使用 chart.js 在 JavaScript 中制作圖表的詳細教程。
有許多JavaScript 庫可用于繪制不同的圖表，包括折線圖、條形圖、圖形等等。
如果您正在嘗試學習如何使用 JavaScript 在您的網(wǎng)站上動態(tài)顯示數(shù)據(jù)，Chart.js是您可以測試的庫之一。
React是最好的 JavaScript 框架之一，還提供了一組很酷的圖表庫，您可以通過這些庫創(chuàng)建 Web 和混合應用程序的酷界面。
開始使用 Chart.js 開發(fā)數(shù)據(jù)可視化的步驟是什么？
在本文中了解如何操作。
什么是 Chart.js？
Chart.js 是一個開源的數(shù)據(jù)可視化 JavaScript 庫，可以繪制基于 HTML 的圖表。
它目前能夠支持八種可以動畫的交互式圖表。要使用 chart.js 創(chuàng)建基于 HTML 的圖表，您需要一個HTML 畫布來顯示它。
該庫可用于一系列數(shù)據(jù)集和其他自定義參數(shù)，如邊框顏色、背景顏色等。
其中之一的數(shù)據(jù)集稱為標簽數(shù)據(jù)集，即 X 軸的值。另一個是數(shù)字的集合，通常沿著 Y 軸。
還需要在圖表對象內部定義圖形類型，以確保庫可以確定要繪制什么圖形。
使用 Chart.js 在 JavaScript 中創(chuàng)建圖表
正如我們之前提到的，您可以使用 chart.js 制作各種圖表。
在本教程中，我們將從條形圖和折線圖開始。一旦您了解了這些圖表類型的概念，您將擁有繪制其他可用圖表所需的信息和工具。
首先使用 chart.js，創(chuàng)建所需的文件。在本指南中，文件的名稱將是 chart.html、plot.js 和 index.css。您可以使用任何命名約定來命名您的文件。
然后，將以下代碼復制并粘貼到 HTML 文檔的標題區(qū)域。這將創(chuàng)建提供指向 Chart.js 內容交付網(wǎng)絡 ( CDN ) 的鏈接。
在 chart.html 上：
<head> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"> </script> </head>
HTML文件的格式如下：
<!DOCTYPE HTML><html> <head> <title> Chart </title> <link rel="stylesheet" href="index.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script> </head> <body> <header> <h1> Charts </h1> </header> <canvas id="plots" style="width:100%;max-width:700px"></canvas><script src="plot.js"></script></body></htm/>
在你的 CSS 中：
body{ background-color:#383735;}h1{ color:#e9f0e9; margin-left:43%;}#plots{ margin:auto; background-color: #2e2d2d;}
上面顯示的CSS樣式不是標準的。你可以根據(jù)你的喜好，根據(jù)你的 DOM 的結構來設置它的樣式。當您完成 HTML 或 CSS 文件并準備好使用 JavaScript 創(chuàng)建圖表時。
折線圖
對于要使用 chart.js 創(chuàng)建的折線圖，您需要將圖表類型更改為折線。這告訴庫如何繪制折線圖。
為了顯示這一點，在 JavaScript 文件中：
// Get the HTML canvas by its id plots = document.getElementById("plots");<strong>// Example datasets for X and Y-axesstrong> var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"]; <strong>//Stays on the X-axisstrong> var traffic = [65, 59, 80, 81, 56, 55, 60] //Stays on the Y-axis // Create an instance of Chart object:new Chart(plots, { type: 'line', <strong>//Declare the chart typestrong> data: { labels: months, <strong>//X-axis datastrong> datasets: [{ data: traffic, <strong>//Y-axis datastrong> backgroundColor: '#5e440f', borderColor: 'white', fill: false, //Fills the curve under the line with the background color. It's true by default }] },});輸出：
隨意將您的填充值更改為真實，使用其他數(shù)據(jù)或修改顏色以觀察發(fā)生的情況。
如您所見，頂部附近有一個額外的圖例框。您可以將其從選項參數(shù)中取出。
除了刪除或添加圖例之外，它的選項參數(shù)還可用于進行其他調整。例如，您可以應用它來使軸從零開始。
定義選項參數(shù)。這是 JavaScript 文件中圖表部分的外觀：
// Create an instance of Chart object:new Chart(plots, { type: 'line', <strong>//Declare the chart typestrong> data: { labels: months, <strong>//X-axis datastrong> datasets: [{ data: traffic, <strong>//Y-axis datastrong> backgroundColor: '#5e440f', <strong>//Color of the dotsstrong> borderColor: 'white', <strong>//Line colorstrong> fill: false, //Fills the curve under the line with the background color. It's true by default }] },<strong> //Specify custom options:strong> options:{ legend: {display: false}, //Remove the legend box by setting it to false. It's true by default. //Specify settings for the scales. To make the Y-axis start from zero, for instance: scales:{ yAxes: [{ticks: {min: 0}}] //You can repeat the same for X-axis if it contains integers. } } });輸出：
您還可以為每個點的背景選擇不同的顏色。然而，這種方式的背景顏色變化通常更適合條形圖。
使用 ChartJS 創(chuàng)建條形圖
這是唯一一次您必須將圖表類型更改為條形。無需更改顏色選項的選項，因為條形將自動繼承其背景顏色：
// Create an instance of Chart object:new Chart(plots, { type: 'bar', <strong>//Declare the chart typestrong> data: { labels: months, <strong>//X-axis datastrong> datasets: [{ data: traffic, <strong>//Y-axis datastrong> backgroundColor: '#3bf70c', <strong>//Color of the barsstrong> }] }, options:{ legend: {display: false}, //Remove the legend box by setting it to false. It's true by default. }});輸出：
隨意將 Y 軸設置為從零或任何其他值開始，就像您對折線圖所做的那樣。
要為每個條使用不同的顏色，您必須將與數(shù)據(jù)中的項目數(shù)量兼容的顏色數(shù)組傳遞給 backgroundColor 參數(shù)：
// Create an instance of Chart object:new Chart(plots, { type: 'bar', <strong>//Declare the chart typestrong> data: { labels: months, <strong>//X-axis datastrong> datasets: [{ data: traffic, <strong>//Y-axis datastrong> <strong>//Color of each barstrong>: backgroundColor: [ "rgba(196, 190, 183)", "rgba(21, 227, 235)", "rgba(7, 150, 245)", "rgba(240, 5, 252)", "rgba(252, 5, 79)", "rgb(0,12,255)", "rgb(17, 252, 5)"], }] }, options:{ legend: {display: false}, //Remove the legend box by setting it to false. It's true by default. }});輸出：
使用 Chart.js 創(chuàng)建餅圖
要創(chuàng)建餅圖，請將圖表類型切換為餅圖。也可以使圖例的顯示為真以確定餅圖的每個部分是什么：
// Create an instance of Chart object:new Chart(plots, { type: 'pie', //Declare the chart type data: { labels: months, //Defines each segment datasets: [{ data: traffic, //Determines segment size //Color of each segment backgroundColor: [ "rgba(196, 190, 183)", "rgba(21, 227, 235)", "rgba(7, 150, 245)", "rgba(240, 5, 252)", "rgba(252, 5, 79)", "rgb(0,12,255)", "rgb(17, 252, 5)"], }] }, options:{ legend: {display: true}, //This is true by default. } });輸出：
就像您在前面的示例中所做的那樣，通過更改圖表類型來嘗試不同的圖表。
但是，支持一些 chart.js 圖表類型。chart.js 圖表類型，您可以使用上面的代碼約定：
- 酒吧
- 雷達
- 線
- 甜甜圈
- 餡餅
- 氣泡
- 分散
- 極區(qū)
向前進
盡管您在本教程中只熟悉了餅圖、折線圖和條形圖，但使用 chart.js 繪制其他圖表的 Code Pattern 也基于相同的原理。您也可以自由地嘗試其他圖表。
