如何使用 Chart.js 在 JavaScript 中制作圖表？
本文是關(guān)于使用 chart.js 在 JavaScript 中制作圖表的詳細(xì)教程。
有許多JavaScript 庫(kù)可用于繪制不同的圖表，包括折線圖、條形圖、圖形等等。
如果您正在嘗試學(xué)習(xí)如何使用 JavaScript 在您的網(wǎng)站上動(dòng)態(tài)顯示數(shù)據(jù)，Chart.js是您可以測(cè)試的庫(kù)之一。
React是最好的 JavaScript 框架之一，還提供了一組很酷的圖表庫(kù)，您可以通過(guò)這些庫(kù)創(chuàng)建 Web 和混合應(yīng)用程序的酷界面。
開始使用 Chart.js 開發(fā)數(shù)據(jù)可視化的步驟是什么？
在本文中了解如何操作。
什么是 Chart.js？
Chart.js 是一個(gè)開源的數(shù)據(jù)可視化 JavaScript 庫(kù)，可以繪制基于 HTML 的圖表。
它目前能夠支持八種可以動(dòng)畫的交互式圖表。要使用 chart.js 創(chuàng)建基于 HTML 的圖表，您需要一個(gè)HTML 畫布來(lái)顯示它。
該庫(kù)可用于一系列數(shù)據(jù)集和其他自定義參數(shù)，如邊框顏色、背景顏色等。
其中之一的數(shù)據(jù)集稱為標(biāo)簽數(shù)據(jù)集，即 X 軸的值。另一個(gè)是數(shù)字的集合，通常沿著 Y 軸。
還需要在圖表對(duì)象內(nèi)部定義圖形類型，以確保庫(kù)可以確定要繪制什么圖形。
使用 Chart.js 在 JavaScript 中創(chuàng)建圖表
正如我們之前提到的，您可以使用 chart.js 制作各種圖表。
在本教程中，我們將從條形圖和折線圖開始。一旦您了解了這些圖表類型的概念，您將擁有繪制其他可用圖表所需的信息和工具。
首先使用 chart.js，創(chuàng)建所需的文件。在本指南中，文件的名稱將是 chart.html、plot.js 和 index.css。您可以使用任何命名約定來(lái)命名您的文件。
然后，將以下代碼復(fù)制并粘貼到 HTML 文檔的標(biāo)題區(qū)域。這將創(chuàng)建提供指向 Chart.js 內(nèi)容交付網(wǎng)絡(luò) ( 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樣式不是標(biāo)準(zhǔn)的。你可以根據(jù)你的喜好，根據(jù)你的 DOM 的結(jié)構(gòu)來(lái)設(shè)置它的樣式。當(dāng)您完成 HTML 或 CSS 文件并準(zhǔn)備好使用 JavaScript 創(chuàng)建圖表時(shí)。
折線圖
對(duì)于要使用 chart.js 創(chuàng)建的折線圖，您需要將圖表類型更改為折線。這告訴庫(kù)如何繪制折線圖。
為了顯示這一點(diǎn)，在 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í)，使用其他數(shù)據(jù)或修改顏色以觀察發(fā)生的情況。
如您所見，頂部附近有一個(gè)額外的圖例框。您可以將其從選項(xiàng)參數(shù)中取出。
除了刪除或添加圖例之外，它的選項(xiàng)參數(shù)還可用于進(jìn)行其他調(diào)整。例如，您可以應(yīng)用它來(lái)使軸從零開始。
定義選項(xiàng)參數(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. } } });輸出：
您還可以為每個(gè)點(diǎn)的背景選擇不同的顏色。然而，這種方式的背景顏色變化通常更適合條形圖。
使用 ChartJS 創(chuàng)建條形圖
這是唯一一次您必須將圖表類型更改為條形。無(wú)需更改顏色選項(xiàng)的選項(xiàng)，因?yàn)闂l形將自動(dò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è)置為從零或任何其他值開始，就像您對(duì)折線圖所做的那樣。
要為每個(gè)條使用不同的顏色，您必須將與數(shù)據(jù)中的項(xiàng)目數(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)建餅圖
要?jiǎng)?chuàng)建餅圖，請(qǐng)將圖表類型切換為餅圖。也可以使圖例的顯示為真以確定餅圖的每個(gè)部分是什么：
// 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. } });輸出：
就像您在前面的示例中所做的那樣，通過(guò)更改圖表類型來(lái)嘗試不同的圖表。
但是，支持一些 chart.js 圖表類型。chart.js 圖表類型，您可以使用上面的代碼約定：
- 酒吧
- 雷達(dá)
- 線
- 甜甜圈
- 餡餅
- 氣泡
- 分散
- 極區(qū)
向前進(jìn)
盡管您在本教程中只熟悉了餅圖、折線圖和條形圖，但使用 chart.js 繪制其他圖表的 Code Pattern 也基于相同的原理。您也可以自由地嘗試其他圖表。
