JavaScript >> Javascript 文檔 >  >> JavaScript

使用 Chart.js 在 JavaScript 中創建圖表的指南

簡介

數據幫助我們講述引人入勝的故事,數據可視化是使用圖表、圖形等圖形元素對信息和數據的圖形表示,有一些庫可以幫助我們用相對較少的工作和圖表產生漂亮的結果.js 就是其中之一。

開始使用

Chart.js 是一個流行的社區維護的開源數據可視化框架。它使我們能夠生成響應式條形圖、餅圖、折線圖、圓環圖、散點圖等。我們所要做的只是指出您希望在頁面上的哪個位置顯示圖表,您想要什麼樣的圖表繪製,然後為 Chart.js 提供數據、標籤和其他設置。之後,圖書館就完成了所有繁重的工作!

安裝

要開始使用 Chart.js,我們必須先安裝它,因為它是一個第三方庫。 Chart.js 可以通過 npm、GitHub 版本或 Chart.js CDN 安裝,這是最快捷、最簡單的方法。

對於本指南,我們將使用 Chart.js CDN。您可以通過獲取最新的 CDN 鏈接並將其添加到您的項目中來實現。

注意: 請使用帶有 Chart.min.js 的 URL 最後,因為這是縮小版。

截至撰寫本文時,最新版本是 3.7.1。您所要做的就是將以下內容添加到 HTML 文件的 head 元素中:

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

成功完成後,我們就可以使用該庫了。

使用 Chart.JS 創建圖表

對於本指南,我們將創建幾種圖表,根據它們目前擁有的 GitHub Star 數量突出顯示最流行的 JavaScript 框架。以下是我們將使用的信息:

JavaScript 框架 GitHub 星星
反應 185,134
Vue 195,514
角度 80,460
苗條 57,022
Ember.js 22,165
Backbone.js 27,862

創建一個畫布來渲染圖表

第一步是在我們的 HTML 中為要呈現的圖表提供一個位置。 Chart.js 依賴於 HTML5 Canvas 標籤(用於繪製線條、圓圈等)的可用性來生成和呈現圖表。有關 Canvas API 的更多信息,請參見此處。

我們所要做的就是構造 canvas body 內的標籤 標記並提供 ID 我們需要調用 fetch 元素並在 JavaScript 中引用我們指定的圖形元素:

<canvas id="myChart" width="1000" height="600"></canvas>

注意: 我們可以稱ID 不管我們想要什麼,但是建議我們選擇一個描述性的名稱來代表我們想要生成的圖表類型。如果我們要向一個頁面添加許多圖表,重要的是我們要確保每個 ID 是不同的(例如,我們可以給我們的圖更具體的名稱,如 studentsChartproductChart 等)。

這是我們的 HTML 文件現在的樣子:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
		<title>Programming Lang. Chart</title>
	</head>
	<body>
		<canvas id="myChart" width="1000" height="600"></canvas>

		<script src="./App.js"></script>
	</body>
</html>

準備和組織我們的數據

我們必須保存之前提供的信息(框架和星星)。對我們來說最方便的格式是將其保存在一個對像中,其中鍵代錶框架,值代表星星。在我們的 App.js ,讓我們定義我們的 data

const data = {
    'React': 185134,
    'Vue': 195514,
    'Angular': 80460,
    'Svelte': 57022,
    'Ember.js': 22165,
    'Backbone.js': 27862
};

創建條形圖

讓我們從核心邏輯開始;我們將看到如何製作條形圖,以及稍後如何通過輕鬆更改我們的參數來製作其他圖表。 Chart.js 的偉大之處在於,一旦你創建了一個 Chart 對象 - 要更改它,您只需更改 type 屬性並保留其他所有內容!

第一步是從 HTML 中獲取 ID 為 myChart 的 canvas 元素 並將其分配給 context 變量 - 通常命名為 ctx

const ctx = document.getElementById('myChart').getContext('2d');

注意: 我們可以隨意命名變量; ctx 只是大多數開發人員喜歡的一種模式,也是我們將要使用的模式。 .getContext('2d') 是一個可選方法,允許我們訪問 canvas 標籤的 2D 繪圖功能。

創建 Chart 對象,我們稱之為 new Chart() 構造函數,它接受兩個參數:

  • ctx :上下文對象,引用我們正在繪製的畫布元素。
  • 配置對象:使我們能夠設置圖表類型、數據和圖表參數。
const myChart = new Chart(ctx, {});

我們將使用配置對象來幫助我們創建條形圖。正如我們之前所說,配置對象讓我們指定:

  • 圖表類型: 我們希望生成的圖表類型。在這種情況下,我們正在製作一個條形圖。我們可能會提供 type: 'pie'type: 'line' 如果我們想要餅圖或折線圖。
  • 圖表數據: 將用於創建圖表的標籤和值。
  • 圖表選項: 用於自定義圖表的配置選擇,例如調整圖例的位置、啟用/禁用響應能力、控件樣式等。

讓我們設置一個骨架配置對象:

{
  type: 'bar',
  data: {},
  options: {} // this is optional
}

然後可以將此對像傳遞到圖表實例化中。讓我們在 type 旁邊添加圖表數據 :

const myChart = new Chart(ctx, {
	type: 'bar',
	data: {
		labels: Object.keys(data),
		datasets: [
			{
				label: 'Number of GitHub Stars',
				data: Object.values(data),
			},
		],
	},
});

由於我們正在處理一個對象 - 我們可以通過 Object.keys() 提取它的鍵和值 和 Object.values() 方法。或者,您也可以在單獨的數組中獲取標籤和值!

了解數據屬性

標籤和數據集是數據屬性對象的兩個屬性。標籤表示將在 X 軸上顯示的組件數組:

datasets 接受具有兩個基本屬性的對像數組:

  • label :通常顯示在圖表頂部或懸停在條形圖上時的字符串,如下所示:
  • data :一組值,顯示在 Y 軸上,反映了我們示例中的 GitHub 星數:

注意: 您可以擁有許多數據集,每個數據集都有自己獨特的“副標題”(label ) 和 data .如果您繪製多個數據集,則使用不同的顏色來表示差異會有所幫助。我們稍後會介紹這個用例。

總之 - 為了繪製條形圖,我們準備畫布/上下文並初始化 Chart() 使用我們的數據和標籤:

const data = {
    'React': 185134,
    'Vue': 195514,
    'Angular': 80460,
    'Svelte': 57022,
    'Ember.js': 22165,
    'Backbone.js': 27862
};

const ctx = document.getElementById('myChart').getContext('2d');

const myChart = new Chart(ctx, {
	type: 'bar',
	data: {
		labels: Object.keys(data),
		datasets: [
			{
				label: 'Number of GitHub Stars',
				data: Object.values(data),
			},
		],
	},
});

當您刷新瀏覽器時 - 頁面應包含以下內容:

水平條形圖

要將條形圖翻轉為水平圖 - 您設置 indexAxis 屬性喲 yoptions 對象:

const myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    ...
  },
  options: {
    indexAxis: 'y',
  }
});

注意: 在以前的 Chart.js 版本中,您將替換 type:bar 使用 type:horizontalBar ,不過,從那以後它就被棄用了。

條形圖樣式

至此,我們已經成功創建了條形圖!不過,數據可視化是關於講故事的——不僅僅是數據。我們通常想讓圖表更具視覺吸引力!此外,不對圖表進行樣式設置不僅會使圖表變得乏味,而且難以閱讀。例如,如果一個餅圖的所有楔形都具有相同的顏色,那麼您將無法真正區分不同的類別,除非您為每個楔形添加邊框。

我們可以通過以下方式更改其中一些選項:backgroundColor , borderColorborderWidth .

免費電子書:Git Essentials

查看我們的 Git 學習實踐指南,其中包含最佳實踐、行業認可的標準以及隨附的備忘單。停止谷歌搜索 Git 命令並真正學習 它!

backgroundColor - 採用一組十六進製或 RGBA 顏色值(字符串)來為圖表的條形著色。這也可以使用單一顏色來完成,因為它將應用於所有條形:

backgroundColor: 'red' // Setting all bars to red

// Or

backgroundColor: [
  'rgba(255, 99, 132, 0.2)',  // Bar 1
  'rgba(54, 162, 235, 0.2)',  // Bar 2
  'rgba(255, 206, 86, 0.2)',  // Bar 3
  'rgba(75, 192, 192, 0.2)',  // Bar 4
  'rgba(153, 102, 255, 0.2)', // Bar 5
  'rgba(255, 159, 64, 0.2)'   // Bar 6
],

borderWidth - 它採用整數或浮點值,並指定邊框的寬度:

borderWidth: 2

borderColor - 同backgroundColor 屬性,它接受一個顏色值字符串數組。它將為欄的邊框著色:

borderColor: 'green' // Setting all borders to green

// Or

borderColor: [
  'rgba(255, 99, 132, 1)',    // Bar 1
  'rgba(54, 162, 235, 1)',    // Bar 2
  'rgba(255, 206, 86, 1)',    // Bar 3
  'rgba(75, 192, 192, 1)',    // Bar 4
  'rgba(153, 102, 255, 1)',   // Bar 5
  'rgba(255, 159, 64, 1)'     // Bar 6
],

注意: 所有這些屬性及其值都是 data 的一部分 對象,就在 datasets 之後 .

將這些組合在一起,您可以製作出精美的條形圖:

const myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: Object.keys(data),
        datasets: [{
            label: 'Number of GitHub Stars',
            data: Object.values(data),
        }, ],
    },
    options: {
        backgroundColor: [
            'rgba(255, 99, 132, 0.2)',  // Bar 1
            'rgba(54, 162, 235, 0.2)',  // Bar 2
            'rgba(255, 206, 86, 0.2)',  // Bar 3
            'rgba(75, 192, 192, 0.2)',  // Bar 4
            'rgba(153, 102, 255, 0.2)', // Bar 5
            'rgba(255, 159, 64, 0.2)'   // Bar 6
        ],
        borderWidth: 2,
        borderColor: 'black'
    }
});
如何控製圖表的寬度和高度

到目前為止,如果您一直在瀏覽器中查看圖表,您可能已經註意到瀏覽器正在全屏顯示圖表,並且沒有考慮我們之前在 canvas 元素上設置的寬度和高度:

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

為了解決這個問題,我們必須通過在選項對像中傳遞一些選項來為我們的條形圖實例添加配置。這些是選項:

  • maintainAspectRation :設置為 false 尊重我們之前添加到畫布的高度。這意味著我的圖表將是 400 像素高。
  • responsive :設置為 false 以完全控制畫布的寬度。
const myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    // Data...
  },
  options: {
    // ... Other options
    maintainAspectRatio: false,
    responsive: false
  }
});

解釋如何使用 CSS 實現這一點會很有幫助,這是另一種控製圖表寬度和高度的方法。這個選項需要額外的標記,但更靈活,因為我們的圖表仍然是響應式的!

注意: 我們必須刪除 options 對象,以及 canvas 標籤的 heightwidth .

現在讓我們將 canvas 標籤包裝在 div 中 我們將使用它來設置圖表樣式:

<div class="container">
	<canvas id="myChart"></canvas>
</div>

在我們的 CSS 中,我們需要做的就是應用一個 max-width 並設置它的 margin0 auto ,所以它會調整大小並出現在中間:

.container {
	max-width: 800px;
	margin: 0 auto;
}

當您現在重新加載瀏覽器時,您會注意到它是響應式的,並且它也遵守 max-width 設置!

使用 Chart.js 繪製折線圖、圓環圖、極地圖和雷達圖

創建圖表很簡單,我們只需要將類型從 type: "bar" 更改 到您想要的特定類型。這可能是 pie , horizontalBar , line , doughnut , radar , polarArea , scatter 等等

在圖表中添加/更新和刪除數據集

到目前為止,我們已經了解瞭如何在 Chart.js 中製作各種類型的圖表。讓我們看看如何從我們的現有中添加和刪除數據 立即繪製圖表。

data 對像有一個 labels 屬性(在我們的例子中對應於框架名稱)和一個 datasets 屬性,其中可以繪製其中的每個數據集。讓我們看看如何將新實例添加到 data

添加數據

一般來說,更新圖表的通用方法包括訪問 data 屬性,並將新標籤和數據推送到其數據集,然後調用 chart.update()

function addData(chart, label, data) {
    chart.data.labels.push(label);
    chart.data.datasets.forEach((dataset) => {
        dataset.data.push(data);
    });

    chart.update();
}

addData(myChart, 'SolidJS', 18200)

update() 方法是在更改 data 後調用 對象,並安全地更新圖表。它會重新渲染比例尺、圖例和整個圖表,因此所做的任何更改都將在無需額外調用的情況下呈現。

讓我們繼續更新我們自己的 data 對象(不要被誤解為圖表自己的data 屬性)並看看我們如何使用新值更新圖表。

向現有圖表添加新數據

假設我們收到一個請求,將其反序列化為應該添加到圖表中的 JavaScript 對象。我們可以通過這個 dataObj 到我們的 data (模擬數據庫)並添加新的 dataObj 到圖表:

function updateChart(chart, dataObj) {
    // Saving the new incoming object into the mock database
    Object.assign(data, dataObj);

    // Push changes to the chart
    chart.data.labels.push(Object.keys(dataObj));
    chart.data.datasets.forEach((dataset) => {
        dataset.data.push(Object.values(dataObj));
    });
    // Update chart
    chart.update();
}

const newData = {'SolidJS': 18200};
updateChart(myChart, newData);

向現有圖表添加多個數據點

如果我們嘗試使用這種方法添加多個數據點,我們會注意到它們都堆疊在一個位置,因為傳遞的 dataObj 直接添加到圖表中。要添加多個數據點,我們需要遍歷數據並將每個屬性(框架名稱)作為單獨的實體推送到數組中:

function updateChart(chart, dataObj) {
    Object.assign(data, dataObj);

    for (const property in dataObj) {
        chart.data.labels.push(property);
        chart.data.datasets.forEach((dataset) => {
            dataset.data.push(dataObj[property]);
        });
    }

    chart.update();
}

用新數據替換所有數據

由於我們的 data 充當數據庫 - 讓我們將示例從之前更新到第一個 store 將傳入的數據對象放入數據庫,然後從數據庫中拉取數據,而不是從請求中添加數據。

這更符合您將在實際開發環境中使用的內容。如前所述,我們將 assign() 新的 dataObjdata , 但不是將值推送到現有數組 - 我們將用從數據庫中獲取的所有數據替換數組:

function updateChart(chart, dataObj) {
    // Store data into the database
    Object.assign(data, dataObj);

    // Fetch data from the database and replace old data
    chart.data.labels = Object.keys(data);
    chart.data.datasets.forEach((dataset) => {
        dataset.data = Object.values(data);
    });

    chart.update();
}

const newData = {'SolidJS': 18200};
updateChart(myChart, newData);

這在插入多個對象時也能正常工作:

const newData = {'SolidJS': 18200, 'SemanticUI': 50000 };

從圖表中刪除數據

刪除數據與添加數據相反。 pop()push() 相反 :

function removeData(chart) {
    chart.data.labels.pop();
    chart.data.datasets.forEach((dataset) => {
        dataset.data.pop();
    });

    chart.update();
}

removeData(myChart);

pop() 刪除數組中的最後一項,因此只會刪除最後一項。同樣,shift() 刪除第一個。不過,這並沒有給你太多的權力來控制被刪除的內容。

通常,您希望以刪除為目標,在這種情況下,將傳遞要刪除的值。值得慶幸的是,從對像中刪除值真的很容易:

function removeData(chart, val) {
    // Delete entry from the database
    delete data[val];

    // Re-populate and re-render the chart
    chart.data.labels = Object.keys(data);
    chart.data.datasets.forEach((dataset) => {
        dataset.data = Object.values(data);
    });

    chart.update();
}

removeData(myChart, "React");

更多樣式

現在讓我們看看更多可以使用 Chart.js 輕鬆執行的樣式選項。

全局樣式/配置

Chart.js 允許我們聲明一些全局配置,定義在 Chart.defaults .

讓我們使用它來全局調整聊天的字體系列、字體大小、字體樣式和字體粗細,使其適用於圖表上的每個文本。這些選項可以在 Chart.defaults.font 中找到。

Chart.defaults.font.size = 10;
Chart.defaults.font.weight = 'bold';
Chart.defaults.font.family = 'Lato';
Chart.defaults.font.style = 'italic';

注意: 全局字體設置僅在單個圖表的配置中不包含更具體的選項時適用。

例如,在此圖表中,文本將具有 16 像素的字體大小,但標題文本具有指定的特定大小:

Chart.defaults.font.size = 16;
let chart = new Chart(ctx, {
	type: 'line',
	data: data,
	options: {
		plugins: {
			title: {
				text: 'Popular JavaScript Frameworks',
				font: {
					size: 25,
				},
			},
		},
	},
});

注意: 我們還可以使用 Chart.defaults.color 為聊天中的所有文本添加全局顏色 .

設置標題

一個plugin options 內 可以添加對象來指定標題:

options: {
  ...
  plugins: {
    title: {
      display: true,
      text: 'Popular JavaScript Frameworks',
      font: {
        size: 25
      }
    },
  }
}

注意: 這接受更多樣式,如位置、填充、字體等。更多細節在 Chart.js 官方文檔中。

添加圖例

圖例是幫助用戶將類及其標籤與其顏色聯繫起來的好方法。圖例也可以使用 Chart.defaults.plugins.legend 全局聲明/樣式 如果您有多個圖表並且不想重複相同的代碼:

plugins: {
  ...
  legend: {
    display: true,
    position: 'right'
  }
}

注意: 除了前面提到的其他圖表,最好設置 displayfalse .

結論

到目前為止,在本教程中,我們已經能夠學習如何使用 Chart.js 創建所有形式的圖形,並了解我們如何應用樣式,如果您不了解它是如何正常工作的,這可能會變得非常棘手。


Tutorial JavaScript 教程
  1. 代數結構解釋 - 第 3 部分

  2. 開始測試你的 React 應用程序

  3. 安裝 Node.js 教程:在 Linux 上使用 snaps

  4. 3 個簡單的 JavaScript 更改

  5. 如何添加像素過濾器?

  6. 使用 Web 組件構建 Instagram/Whatsapp 故事克隆 🔥

  7. JavaScript 閉包的披露。

  1. 將 Keras 模型轉換為 TensorFlow.js

  2. jQuery提交函數的泛化

  3. 使用 Puppeteer 和 Node.js 截取網頁並生成動態 Open Graph 圖像進行社交分享的三種方法

  4. 使用 Electron、Vue.js 和 Tesseract.js 創建一個簡單的 OCR 應用程序

  5. 12 個簡單示例中的 12 個 ES10 特性

  6. 用 JavaScript 構建聊天應用程序

  7. 如何在郵遞員測試中將字符串與日期進行比較?

  1. 從 🪄scratch 使用 NodeJS 發送自定義電子郵件,無需任何費用🗡

  2. URI 的格式設置

  3. 我們如何在 React Native 中將生產 apk 的大小減少 70%?

  4. Vite 更新:VITE 開始滾動的 PWA 文檔