整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
當今數據驅動的世界中，數據可視化簡化了復雜信息，賦予個人做出明智決策的能力。其中一種特別有價值的圖表類型是資源圖表，它有助于高效的資源分配。本教程將是您創建動態資源圖表的必備指南，使用JavaScript。
資源圖表是一種甘特圖類型，用于可視化有關資源利用的數據，例如設備、員工等。它提供了全面的概述，使得及時做出明智決策變得更加容易。舉個例子，在本教程中，我將以球場為單位代表2022年卡塔爾世界杯的賽程，讓您可以追蹤每場比賽的時間和地點。
準備好您的編碼工具，通過本指南結束時，您將能夠創建自己基于JavaScript的資源圖表，并擁有一個有價值的工具，用于追蹤您下一個喜愛的錦標賽、服務器狀態、員工項目分配，或者其他類似的事物。
您是否對我們即將創建的內容感到興奮？繼續閱讀，您將學會如何創建一個JavaScript資源圖表，就像下面展示的一樣。
感到好奇嗎？讓我們一起開始這激動人心的旅程吧！
資源圖表乍一看可能會顯得復雜，因為它使用水平條來表示時間段。然而，我向您保證，一旦您掌握了它，就會發現它其實非常簡單。您可以通過以下四個基本步驟來構建這個圖表：
現在，讓我們詳細了解每個步驟。
首先，創建一個基本的HTML頁面，用于承載您的JavaScript資源圖表。在HTML文檔的主體中，添加一個HTML塊元素，比如<div>，它將作為您即將創建的圖表的容器。給它一個ID，在您后面創建圖表時，將在JavaScript代碼中引用它。為了確保圖表使用正確的位置，可以在<style>塊中定義一些CSS規則。
下面是一個以這種方式創建的簡單網頁的示例。我將<div>元素命名為“container”，并調整其高度和寬度，使圖表占據整個屏幕。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Resource Gantt Chart</title>
<style type="text/css">
html,
body,
#container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="container"></div>
</body>
</html>
在數據可視化方面，JavaScript圖表庫是非常寶貴的工具。關鍵是找到一個不僅滿足您的需求，而且支持您尋找的特定圖表類型的庫。
在本教程中，我將使用AnyChart，這是一個長期存在的JavaScript圖表庫，支持資源圖表，并提供全面的文檔，而且它是免費的（除非您將其集成到商業應用程序中）。如果您選擇使用其他庫，整個過程基本上是一樣的。
您可以通過兩種主要選項來包含所選庫的必要JavaScript文件：下載它們并在本地使用，或者通過CDN（內容傳送網絡）直接鏈接到它們。在本教程中，我將選擇CDN的方式。下面是在HTML頁面的<head>部分鏈接所需腳本的示例。
圖表的代碼將位于HTML頁面的<body>部分的<script>標簽中。或者，如果更適合您的項目結構，也可以將其放在<head>部分。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Resource Gantt Chart</title>
<style type="text/css">
html,
body,
#container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
<script src="https://cdn.anychart.com/releases/8.11.1/js/anychart-core.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.11.1/js/anychart-gantt.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.11.1/js/anychart-data-adapter.min.js"></script>
</head>
<body>
<div id="container"></div>
<script>
// The place for the following chart’s code.
</script>
</body>
</html>
現在，讓我們加載數據。在本教程中，將可視化2022年FIFA世界杯的賽程。數據以JSON格式在提供的GitHub gist上可用。
數據由一系列對象組成，每個對象代表一個球場。您將在每個球場對象中找到其名稱和城市等詳細信息。此外，還有一個名為“periods”的屬性，其中包含在該球場舉辦的比賽列表。每場比賽由兩支參賽國家的名稱和比賽結果表示。
為了正確地將這種類型的數據輸入到資源圖表中，可以使用anychart.data.loadJsonFile()方法。下面是加載數據的代碼片段：
anychart.data.loadJsonFile("https://gist.githubusercontent.com/awanshrestha/07b9144e8f2539cd192ef9a38f3ff8f5/raw/b4cfb7c27b48a0e92670a87b8f4b1607ca230a11/Fifa%2520World%2520Cup%25202022%2520Qatar%2520Stadium%2520Schedule.json");
數據加載完畢后，您現在可以繼續，看看如何通過幾行JavaScript代碼轉化為一個完全功能的資源圖表。
首先，添加anychart.onDocumentReady()函數，它封裝了確保您的代碼僅在頁面完全加載時執行的所有必要代碼。
<script>
anychart.onDocumentReady(function () {
// The resource chart data and code will be in this section.
});
</script>
接下來，加載數據并創建一個數據樹。
anychart.onDocumentReady(function () {
// load the data
anychart.data.loadJsonFile(
"https://gist.githubusercontent.com/awanshrestha/07b9144e8f2539cd192ef9a38f3ff8f5/raw/b4cfb7c27b48a0e92670a87b8f4b1607ca230a11/Fifa%2520World%2520Cup%25202022%2520Qatar%2520Stadium%2520Schedule.json",
function (data) {
// create a data tree
var treeData = anychart.data.tree(data, 'as-table’);
}
);
});
然后，使用ganttResource()方法創建資源甘特圖，并使用data()方法設置您的數據樹。
// create a resource gantt chart
var chart = anychart.ganttResource();
// set the data for the chart
chart.data(treeData);
將圖表放置在第1步中引入的<div>容器中，最后使用draw()方法繪制圖表。
// set the container
chart.container("container");
// draw the chart
chart.draw();
哇！您已成功使用JavaScript創建了一個簡單而完全功能的資源圖表。看看它在實際中是如何呈現的；這個圖表的交互版本可以在這里找到。為了您的方便，還提供了基本資源圖表的完整代碼。
有了這個資源圖表，您可以輕松地可視化哪些比賽在哪些球場舉行，您可以在右側的比賽部分滾動查看所有比賽。但還有更多內容可以探索，所以讓我們繼續定制這個交互式數據可視化。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Resource Gantt Chart</title>
<style type="text/css">
html,
body,
#container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
<script src="https://cdn.anychart.com/releases/8.11.1/js/anychart-core.min.js"></script>
<script data-fr-src="https://cdn.anychart.com/releases/8.11.1/js/anychart-gantt.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.11.1/js/anychart-data-adapter.min.js"></script>
</head>
<body>
<div id="container"></div>
<script>
anychart.onDocumentReady(function () {
// load the data
anychart.data.loadJsonFile(
"https://gist.githubusercontent.com/awanshrestha/07b9144e8f2539cd192ef9a38f3ff8f5/raw/b4cfb7c27b48a0e92670a87b8f4b1607ca230a11/Fifa%2520World%2520Cup%25202022%2520Qatar%2520Stadium%2520Schedule.json",
function (data) {
// create a data tree
var treeData = anychart.data.tree(data, "as-table");
// create a resource gantt chart
var chart = anychart.ganttResource();
// set the data for the chart
chart.data(treeData);
// set the container
chart.container("container");
// draw the chart
chart.draw();
}
);
});
</script>
</body>
</html>
現在基本的基于JavaScript的資源圖表已經就緒，讓我們探索一些增強其視覺效果和功能的方法。
為了提高資源圖表的視覺吸引力，讓我們深入一些可能的行和列的調整。
首先，您可以為行的選定和懸停狀態設置自定義顏色，并調整分隔位置以獲得更好的內容可見性。此外，考慮指定默認行高，以便整潔地呈現和輕松閱讀行項目。
// customize the rows
chart
.rowSelectedFill("#D4DFE8")
.rowHoverFill("#EAEFF3")
.splitterPosition(230);
// set the row height
chart.defaultRowHeight(50);
現在，讓我們繼續配置列。在第一列中，您可以選擇將一個簡單的數字標簽“#”作為標題，并自定義其寬度。
對于第二列，您可以將球場名稱設置為粗體，以突出顯示，并將城市名稱放在球場名稱的正下方。根據需要調整列寬，以舒適地容納內容。
// customize the column settings:
// get the data grid
var dataGrid = chart.dataGrid();
// set the fixed columns mode
dataGrid.fixedColumns(true);
// first column
dataGrid
.column(0)
.title("#")
.width(30
.labels({ hAlign: "center" });
// second column
dataGrid
.column(1)
.title("Stadium")
.width(200)
.labels()
.useHtml(true)
.format(function () {
return (
"<strong>" + this.name.toString() + "</strong> <br>" + this.item.get("city")
);
});
現在，讓我們通過在時間軸條上直接顯示比賽結果來增強資源圖表。這樣可以快速查看比賽結果，而無需參考其他地方。
為了實現這一點，啟用時間軸周期上的標簽，并使用useHtml()方法應用自定義樣式。
// configure the period labels:
// get the period labels
var periodLabels = chart.getTimeline().periods().labels();
// set the period labels
periodLabels
.enabled(true)
.useHtml(true)
.format(
"<span style='color:#fff; font-size: 12px;'>{%result}</span>"
);
在資源條本身的額外信息的基礎上，圖表現在一目了然地提供了更豐富的信息。
為了獲得美觀的用戶體驗，考慮為圖表的視覺方面增添一些調味。
首先，將圖表的背景顏色設置為淺灰色。
chart.background("#edeae8 0.8");
接下來，從時間軸中作為元素訪問條形，并對它們的填充和描邊顏色進行調整。
var elements = chart.getTimeline().elements();
elements.normal().fill("#9a1032 0.8");
elements.normal().stroke("#212c68");
再進一步，可以使用函數根據條件動態填充條形的顏色。例如，比賽結果可以是這樣的一個條件。因此，該函數檢查比賽結果，如果是平局，則將條形涂成綠色；否則，涂成紅色。這提供了一種有趣的方式，可以通過條形的顏色立即辨別比賽的結果。
// 自定義條形的顏色：
// 獲取元素
var elements = chart.getTimeline().elements();
// 檢查當前項目是否為平局，如果是，則以不同的顏色填充
elements.normal().fill(function() {
var result = this.period.result;
var scores = result.split("-").map(Number);
if (scores[0] === scores[1]) {
return "#11A055 0.8";
} else {
return "#9a1032 0.8";
}
});
elements.normal().stroke("#212c68");
現在，是時候微調工具提示，以提供更好的用戶體驗。
為了保持工具提示簡潔明了，配置它在懸停在特定條形上時顯示球隊名稱和比賽結果。
// 配置工具提示
var tooltip = chart.getTimeline().tooltip();
tooltip
.useHtml(true)
.format(function(e) {
var tooltipText;
if (typeof e.period === "undefined") {
tooltipText = e.item.la.city;
} else {
var period = e.period;
tooltipText = period.result;
}
return tooltipText;
});
這些微小的調整顯著提高了呈現數據的視覺清晰度。現在，下面是資源圖表的最終版本。您可以在此處探索這個最終圖表的交互版本。隨意探索并與之交互。為了方便起見，下面提供了最終資源圖表的完整代碼。
挑戰30天在頭條寫日記#
顏色插件
Chart.js 品牌顏色的默認調色板可作為內置的省時零配置插件使用。
Tree-shaking
通過僅注冊必要的組件，JavaScript 包的大小可以減少數十千字節。
規模堆疊
布局框可以按組堆疊和加權。
字幕插件
輔助標題插件，具有與主標題相同的所有選項。
線段樣式
線段可以根據任何用戶定義的標準設置樣式。
3.0新功能高級動畫
每個元素中每個屬性的轉換都可以單獨且獨立地配置。
新功能表現！
引入了許多性能增強功能。此示例具有 1M (2x500k) 點，啟用了新的抽取插件。
2.0新功能混合圖表類型
混合搭配條形圖和折線圖，以在數據集之間提供清晰的視覺區分。
2.0新功能新的圖表軸類型
輕松繪制日期時間、對數甚至完全自定義比例的復雜、稀疏數據集。
2.0新功能動畫一切！
更改數據、更新顏色和添加數據集時，開箱即用的令人驚嘆的過渡。
在此示例中，我們為單個數據集創建條形圖并將其呈現在 HTML 頁面上。將此代碼片段添加到您的頁面：
<div>
<canvas id="myChart"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const ctx = document.getElementById('myChart');
new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
</script>
你應該得到一個像這樣的圖表：
讓我們分解一下這段代碼。
首先，我們的頁面中需要有一個畫布。建議為圖表提供自己的容器以提高響應能力。
<div>
<canvas id="myChart"></canvas>
</div>現在我們有了畫布，我們可以包含來自 CDN 的 Chart.js。
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>最后，我們可以創建一個圖表。我們添加一個腳本，該腳本獲取myChart畫布元素并new Chart使用所需的配置進行實例化：bar圖表類型、標簽、數據點和選項。
<script>
const ctx = document.getElementById('myChart');
new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
</script>圖表類型和元素、數據集、自定義、插件、組件和 tree-shaking。不要猶豫，點擊文本中的鏈接。
我們將從頭開始使用幾個圖表構建 Chart.js 數據可視化：
使用 Chart.js 構建新應用程序
在新文件夾中，創建package.json包含以下內容的文件：
{
"name": "chartjs-example",
"version": "1.0.0",
"license": "MIT",
"scripts": {
"dev": "parcel src/index.html",
"build": "parcel build src/index.html"
},
"devDependencies": {
"parcel": "^2.6.2"
},
"dependencies": {
"@cubejs-client/core": "^0.31.0",
"chart.js": "^4.0.0"
}
}
現代前端應用程序經常使用 JavaScript 模塊捆綁器，因此我們選擇Parcel 作為一個很好的零配置構建工具。我們還安裝了 Chart.js v4 和Cube 的 JavaScript 客戶端，這是一個用于數據應用程序的開源 API，我們將使用它來獲取真實世界的數據（稍后會詳細介紹）。
運行npm install、yarn install、 或pnpm install安裝依賴項，然后創建src文件夾。在該文件夾中，我們需要一個非常簡單的index.html文件：
<!doctype html>
<html lang="en">
<head>
<title>Chart.js example</title>
</head>
<body>
<!-- <div style="width: 500px;"><canvas id="dimensions"></canvas></div><br/> -->
<div style="width: 800px;"><canvas id="acquisitions"></canvas></div>
<!-- <script type="module" src="dimensions.js"></script> -->
<script type="module" src="acquisitions.js"></script>
</body>
</html>
正如您所看到的，Chart.js 需要最少的標記：canvas帶有 的標記id，我們稍后將通過它引用圖表。默認情況下，Chart.js 圖表是響應式的，并占據整個封閉容器。所以，我們設置寬度div來控制圖表的寬度。
最后，讓我們創建src/acquisitions.js包含以下內容的文件：
import Chart from 'chart.js/auto'
(async function() {
const data = [
{ year: 2010, count: 10 },
{ year: 2011, count: 20 },
{ year: 2012, count: 15 },
{ year: 2013, count: 25 },
{ year: 2014, count: 22 },
{ year: 2015, count: 30 },
{ year: 2016, count: 28 },
];
new Chart(
document.getElementById('acquisitions'),
{
type: 'bar',
data: {
labels: data.map(row => row.year),
datasets: [
{
label: 'Acquisitions by year',
data: data.map(row => row.count)
}
]
}
}
);
})();
讓我們看一下這段代碼：
是時候使用npm run dev、yarn dev、 或運行示例并在 Web 瀏覽器中pnpm dev導航到localhost:1234 了：
只需幾行代碼，我們就得到了一個具有很多功能的圖表：圖例、網格線、刻度線和懸停時顯示的工具提示。刷新網頁幾次即可看到圖表也是動畫的。嘗試單擊“按年份獲取”標簽，您會發現您還可以切換數據集可見性（當您有多個數據集時特別有用）。
簡單的定制
讓我們看看如何自定義 Chart.js 圖表。首先，讓我們關閉動畫，以便立即顯示圖表。其次，讓我們隱藏圖例和工具提示，因為我們只有一個數據集和相當瑣碎的數據。
將調用new Chart(...);替換src/acquisitions.js為以下代碼片段：
new Chart(
document.getElementById('acquisitions'),
{
type: 'bar',
options: {
animation: false,
plugins: {
legend: {
display: false
},
tooltip: {
enabled: false
}
}
},
data: {
labels: data.map(row => row.year),
datasets: [
{
label: 'Acquisitions by year',
data: data.map(row => row.count)
}
]
}
}
);
正如您所看到的，我們已將該options屬性添加到第二個參數中，這樣您就可以為 Chart.js 指定各種自定義選項。通過提供的布爾標志禁用動畫animation。大多數圖表范圍的選項（例如，響應能力或設備像素比）都是這樣配置的。
圖例和工具提示隱藏在plugins. 請注意，Chart.js 的一些功能被提取到插件中：獨立的、獨立的代碼片段。其中一些插件作為Chart.js 發行版 的一部分提供，其他插件是獨立維護的，并且可以位于很棒的 插件、框架集成和其他圖表類型列表中。
您應該能夠在瀏覽器中看到更新后的簡約圖表。
真實世界數據
對于硬編碼、有限大小、不切實際的數據，很難展示 Chart.js 的全部潛力。讓我們快速連接到數據 API，以使我們的示例應用程序更接近生產用例。
讓我們創建src/api.js包含以下內容的文件：
import { CubejsApi } from '@cubejs-client/core';
const apiUrl = 'https://heavy-lansford.gcp-us-central1.cubecloudapp.dev/cubejs-api/v1';
const cubeToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpYXQiOjEwMDAwMDAwMDAsImV4cCI6NTAwMDAwMDAwMH0.OHZOpOBVKr-sCwn8sbZ5UFsqI3uCs6e4omT7P6WVMFw';
const cubeApi = new CubejsApi(cubeToken, { apiUrl });
export async function getAquisitionsByYear() {
const acquisitionsByYearQuery = {
dimensions: [
'Artworks.yearAcquired',
],
measures: [
'Artworks.count'
],
filters: [ {
member: 'Artworks.yearAcquired',
operator: 'set'
} ],
order: {
'Artworks.yearAcquired': 'asc'
}
};
const resultSet = await cubeApi.load(acquisitionsByYearQuery);
return resultSet.tablePivot().map(row => ({
year: parseInt(row['Artworks.yearAcquired']),
count: parseInt(row['Artworks.count'])
}));
}
export async function getDimensions() {
const dimensionsQuery = {
dimensions: [
'Artworks.widthCm',
'Artworks.heightCm'
],
measures: [
'Artworks.count'
],
filters: [
{
member: 'Artworks.classification',
operator: 'equals',
values: [ 'Painting' ]
},
{
member: 'Artworks.widthCm',
operator: 'set'
},
{
member: 'Artworks.widthCm',
operator: 'lt',
values: [ '500' ]
},
{
member: 'Artworks.heightCm',
operator: 'set'
},
{
member: 'Artworks.heightCm',
operator: 'lt',
values: [ '500' ]
}
]
};
const resultSet = await cubeApi.load(dimensionsQuery);
return resultSet.tablePivot().map(row => ({
width: parseInt(row['Artworks.widthCm']),
height: parseInt(row['Artworks.heightCm']),
count: parseInt(row['Artworks.count'])
}));
}讓我們看看那里發生了什么：
現在，讓我們將真實世界的數據傳遞到我們的圖表中。請進行一些更改src/acquisitions.js：添加導入并替換data變量的定義。
import { getAquisitionsByYear } from './api'
// ...
const data = await getAquisitionsByYear();完畢！現在，我們的真實數據圖表如下所示。看來1964年、1968年和2008年發生了一些有趣的事情！
我們已經完成了條形圖。讓我們嘗試另一種 Chart.js 圖表類型。
進一步定制
Chart.js 支持許多常見的圖表類型。
例如，氣泡圖允許同時顯示三個維度的數據：x和y軸上的位置代表兩個維度，第三個維度由單個氣泡的大小表示。
要創建圖表，請停止已運行的應用程序，然后轉到src/index.html并取消注釋以下兩行：
<div style="width: 500px;"><canvas id="dimensions"></canvas></div><br/>
<script type="module" src="dimensions.js"></script>
然后，創建src/dimensions.js包含以下內容的文件：
import Chart from 'chart.js/auto'
import { getDimensions } from './api'
(async function() {
const data = await getDimensions();
new Chart(
document.getElementById('dimensions'),
{
type: 'bubble',
data: {
labels: data.map(x => x.year),
datasets: [
{
label: 'Dimensions',
data: data.map(row => ({
x: row.width,
y: row.height,
r: row.count
}))
}
]
}
}
);
})();
也許，一切都非常簡單：我們從 API 獲取數據并渲染一個具有該類型的新圖表，將三個維度的數據作為、和（半徑）屬性bubble傳遞。xyr
現在，使用 、 或 重置緩存并再次啟動rm -rf .parcel-cache應用程序。我們現在可以查看新圖表：npm run devyarn devpnpm dev
嗯，看起來不太漂亮。
首先，圖表不是正方形的。藝術品的寬度和高度同樣重要，因此我們希望圖表的寬度也等于其高度。默認情況下，Chart.js 圖表的縱橫比為 1（對于所有徑向圖表，例如圓環圖）或 2（對于所有其他圖表）。讓我們修改圖表的縱橫比：
// ...
new Chart(
document.getElementById('dimensions'),
{
type: 'bubble',
options: {
aspectRatio: 1,
},
// ...
現在看起來好多了：
然而，這仍然不理想。水平軸的范圍從 0 到 500，垂直軸的范圍從 0 到 450。默認情況下，Chart.js 會自動將軸的范圍（最小值和最大值）調整為數據集中提供的值，因此圖表“適合“你的數據。顯然，MoMa 收藏中沒有高度在 450 至 500 厘米范圍內的藝術品。讓我們修改圖表的軸配置來解決這個問題：
// ...
new Chart(
document.getElementById('dimensions'),
{
type: 'bubble',
options: {
aspectRatio: 1,
scales: {
x: {
max: 500
},
y: {
max: 500
}
}
},
// ...
偉大的！看一下更新后的圖表：
然而，還有一個問題：這些數字是多少？單位是厘米不是很明顯。讓我們對兩個軸應用自定義刻度格式以使事情變得清晰。我們將提供一個回調函數，調用該函數來格式化每個刻度值。這是更新后的軸配置：
// ...
new Chart(
document.getElementById('dimensions'),
{
type: 'bubble',
options: {
aspectRatio: 1,
scales: {
x: {
max: 500,
ticks: {
callback: value => `${value / 100} m`
}
},
y: {
max: 500,
ticks: {
callback: value => `${value / 100} m`
}
}
}
},
// ...
完美，現在我們在兩個軸上都有合適的單位：
多個數據集
Chart.js 獨立繪制每個數據集，并允許對它們應用自定義樣式。
看一下圖表：有一條可見的氣泡“線”，其等號x和y坐標代表方形藝術品。將這些氣泡放入自己的數據集中并以不同的方式繪制它們會很酷。此外，我們可以將“較高”的藝術品與“較寬”的藝術品分開，并以不同的方式繪制它們。
我們可以這樣做。將其替換datasets為以下代碼：
// ...
datasets: [
{
label: 'width = height',
data: data
.filter(row => row.width === row.height)
.map(row => ({
x: row.width,
y: row.height,
r: row.count
}))
},
{
label: 'width > height',
data: data
.filter(row => row.width > row.height)
.map(row => ({
x: row.width,
y: row.height,
r: row.count
}))
},
{
label: 'width < height',
data: data
.filter(row => row.width < row.height)
.map(row => ({
x: row.width,
y: row.height,
r: row.count
}))
}
]
// ..
如您所見，我們定義了三個具有不同標簽的數據集。每個數據集都有自己的使用 提取的數據片段filter。現在，它們在視覺上是不同的，而且正如您所知，您可以獨立切換它們的可見性。
這里我們依賴默認的調色板。但是，請記住，每種圖表類型都支持許多數據集選項，您可以隨意自定義。
插件
另一種非常強大的自定義 Chart.js 圖表的方法是使用插件。您可以在插件目錄 中找到一些或創建您自己的臨時插件。在 Chart.js 生態系統中，這是慣用的，并且期望通過插件來微調圖表。例如，您可以自定義畫布背景或使用簡單的臨時插件為其添加邊框。讓我們嘗試一下后者。
插件具有廣泛的 API，但簡而言之，插件被定義為name具有擴展點中定義的一個或多個回調函數的對象。new Chart(...);在調用之前插入以下代碼片段來代替src/dimensions.js：
// ...
const chartAreaBorder = {
id: 'chartAreaBorder',
beforeDraw(chart, args, options) {
const { ctx, chartArea: { left, top, width, height } } = chart;
ctx.save();
ctx.strokeStyle = options.borderColor;
ctx.lineWidth = options.borderWidth;
ctx.setLineDash(options.borderDash || []);
ctx.lineDashOffset = options.borderDashOffset;
ctx.strokeRect(left, top, width, height);
ctx.restore();
}
};
new Chart(
document.getElementById('dimensions'),
{
type: 'bubble',
plugins: [ chartAreaBorder ],
options: {
plugins: {
chartAreaBorder: {
borderColor: 'red',
borderWidth: 2,
borderDash: [ 5, 5 ],
borderDashOffset: 2,
}
},
aspectRatio: 1,
// ...
正如您所看到的，在這個chartAreaBorder插件中，我們獲取畫布上下文，保存其當前狀態，應用樣式，在圖表區域周圍繪制矩形，然后恢復畫布狀態。我們還傳遞了該插件，plugins因此它僅適用于這個特定的圖表。我們還將插件選項傳遞給options.plugins.chartAreaBorder; 我們當然可以在插件源代碼中對它們進行硬編碼，但這種方式可重用性更高。
我們的氣泡圖現在看起來更漂亮了：
搖樹
在生產中，我們努力交付盡可能少的代碼，以便最終用戶可以更快地加載我們的數據應用程序并獲得更好的體驗。為此，我們需要應用tree-shaking ，這是一個奇特的術語，用于從 JavaScript 包中刪除未使用的代碼。
Chart.js 的組件設計完全支持 tree-shaking。您可以一次注冊所有 Chart.js 組件（這在您進行原型設計時很方便）并將它們與您的應用程序捆綁在一起。或者，您可以僅注冊必要的組件并獲得最小的捆綁包，其大小要小得多。
讓我們檢查一下我們的示例應用程序。捆綁包尺寸是多少？您可以停止應用程序并運行npm run build, 或yarn build, 或pnpm build。片刻之后，您將得到如下信息：
% yarn build
yarn run v1.22.17
$ parcel build src/index.html
? Built in 88ms
dist/index.html 381 B 164ms
dist/index.74a47636.js 265.48 KB 1.25s
dist/index.ba0c2e17.js 881 B 63ms
? Done in 0.51s.
我們可以看到 Chart.js 和其他依賴項被捆綁在一個 265 KB 文件中。
src/acquisitions.js為了減小包的大小，我們需要對和進行一些更改src/dimensions.js。首先，我們需要從兩個文件中刪除以下導入語句：import Chart from 'chart.js/auto'.
相反，我們只加載必要的組件并使用 Chart.js“注冊”它們Chart.register(...)。這是我們需要的src/acquisitions.js：
import {
Chart,
Colors,
BarController,
CategoryScale,
LinearScale,
BarElement,
Legend
} from 'chart.js'
Chart.register(
Colors,
BarController,
BarElement,
CategoryScale,
LinearScale,
Legend
);
這是以下代碼片段src/dimensions.js：
import {
Chart,
Colors,
BubbleController,
CategoryScale,
LinearScale,
PointElement,
Legend
} from 'chart.js'
Chart.register(
Colors,
BubbleController,
PointElement,
CategoryScale,
LinearScale,
Legend
);
您可以看到，除了Chart類之外，我們還加載圖表類型、比例和其他圖表元素（例如，條形圖或點）的控制器。您可以在文檔中查找所有可用的組件。
或者，您可以按照控制臺中的 Chart.js 建議進行操作。例如，如果您忘記導入BarController條形圖，您將在瀏覽器控制臺中看到以下消息：
Unhandled Promise Rejection: Error: "bar" is not a registered controller.chart.js/auto請記住在準備生產應用程序時仔細檢查進口。只需要一次這樣的導入就可以有效地禁用樹搖動。
現在，讓我們再次檢查我們的應用程序。運行yarn build你會得到這樣的結果：
% yarn build
yarn run v1.22.17
$ parcel build src/index.html
? Built in 88ms
dist/index.html 381 B 176ms
dist/index.5888047.js 208.66 KB 1.23s
dist/index.dcb2e865.js 932 B 58ms
? Done in 0.51s.
過僅導入和注冊選定的組件，我們刪除了超過 56 KB 的不必要代碼。鑒于其他依賴項在捆綁包中占用約 50 KB，tree-shaking 有助于從我們的示例應用程序的捆綁包中刪除約 25% 的 Chart.js 代碼。
項目地址：https://github.com/chartjs/Chart.js
酷炫的大屏報表怎么做?#制作酷炫的大屏報表通常需要使用數據可視化工具或庫，這些工具可以幫助你將數據轉換為交互式的圖表和圖形。以下是一些步驟和建議，幫助你創建引人注目的大屏報表：
1. **確定目標和需求**：
- 明確你想要展示的數據類型和目的。
- 確定你的受眾和他們的需求。
2. **選擇合適的工具**：
- 根據你的技能水平和需求選擇合適的數據可視化工具。常見的工具有Tableau、Power BI、Qlik Sense、Data Studio等。
- 如果你有編程背景，可以選擇使用D3.js、ECharts、Highcharts等JavaScript庫。
3. **設計布局**：
- 設計一個清晰、邏輯性強的布局，確保信息的層次分明。
- 使用網格系統來對齊元素，保持頁面整潔。
4. **選擇合適的圖表類型**：
- 根據你想要展示的數據類型選擇合適的圖表。例如，條形圖適合比較類別，折線圖適合展示趨勢，餅圖適合展示比例等。
- 使用混合圖表類型來展示復雜數據。
5. **使用顏色和樣式**：
- 使用對比色和調和色來突出重點數據。
- 保持顏色的一致性，避免使用過多的顏色。
6. **添加交互性**：
- 使報表具有交互性，例如通過點擊或懸停來顯示詳細信息。
- 使用動態元素和動畫來吸引用戶的注意力。
7. **優化性能**：
- 確保報表加載速度快，響應迅速。
- 對于大量數據，使用數據聚合和抽樣來減少渲染時間。
8. **測試和反饋**：
- 在不同的設備和瀏覽器上測試報表，確保兼容性。
- 獲取用戶反饋，并根據反饋進行調整。
9. **部署和維護**：
- 將報表部署到服務器或云平臺上，確保用戶可以訪問。
- 定期更新數據和維護報表，確保信息的準確性和時效性。
記住，一個好的大屏報表不僅僅是視覺上的震撼，更重要的是能夠清晰、準確地傳達信息。因此，在追求酷炫效果的同時，不要忽視了數據的準確性和易讀性。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
