?圖表控件AnyChart教程：在 JavaScript 中創(chuàng)建線性儀表圖

翻譯|使用教程|編輯：張瑩心|2021-10-21 11:01:19.630|閱讀 251 次

概述：本文將展示如何快速創(chuàng)建一個很酷的交互式線性儀表圖，突出顯示世界各地的 Covid-19 疫苗接種數(shù)據(jù)。我們的圖表將使我們能夠在撰寫本文時可視化 Covid-19 疫苗接種的狀態(tài)，并將顯示兩種類型的數(shù)據(jù)——顯示我們離全球人口部分和完全接種疫苗的中間目標(biāo)還有多遠(yuǎn)。

# 界面/圖表報(bào)表/文檔/IDE等千款熱門軟控件火熱銷售中 >>

AnyChart是基于JavaScript (HTML5) 的圖表控件。使用AnyChart控件，可創(chuàng)建跨瀏覽器和跨平臺的交互式圖表和儀表。AnyChart 圖表目前已被很多知名大公司所使用，可用于儀表盤、報(bào)表、數(shù)據(jù)分析、統(tǒng)計(jì)學(xué)、金融等領(lǐng)域。

AnyChar HTML5圖表高度可定制且高度兼容。擁有純JavaScript API，AnyChart圖表內(nèi)置客戶端數(shù)據(jù)實(shí)時更新，多層次向下鉆區(qū)和具體參數(shù)更新。強(qiáng)大的主題引擎使你通過一系列圖表進(jìn)行獨(dú)特的演示體驗(yàn)，而PDF和圖像輸出能產(chǎn)出圖書質(zhì)量打印文檔。

點(diǎn)擊下載AnyChart最新版

圖表控件AnyChart教程：在 JavaScript 中創(chuàng)建線性儀表圖

本文提供了一個易于遵循的指南，用于在 JavaScript 中構(gòu)建交互式線性儀表圖。我們將展示如何快速創(chuàng)建一個很酷的交互式線性儀表圖，突出顯示世界各地的 Covid-19 疫苗接種數(shù)據(jù)。我們的圖表將使我們能夠在撰寫本文時可視化 Covid-19 疫苗接種的狀態(tài)，并將顯示兩種類型的數(shù)據(jù)——顯示我們離全球人口部分和完全接種疫苗的中間目標(biāo)還有多遠(yuǎn)。

什么是線性儀表圖？

鑒于正在創(chuàng)建的大量數(shù)據(jù)以及從數(shù)據(jù)中收集信息的眾多可能性，數(shù)據(jù)可視化是一種非常寶貴的工具。數(shù)據(jù)可視化對于識別趨勢、解釋模式以及向目標(biāo)受眾傳達(dá)復(fù)雜的想法特別有用。

甲線性量規(guī)圖表表示垂直或水平線性刻度，顯示了所需的值，與一個色標(biāo)有單個或多個的指針沿。可以根據(jù)所表示的數(shù)據(jù)在軸上設(shè)置數(shù)據(jù)范圍的最小值和最大值。指針位置指示度量的當(dāng)前值。

儀表圖可以使用單個指針或標(biāo)記組合顯示單個值或多個值。指針可以是針或帶有任何形狀（如圓形、正方形、矩形或三角形）標(biāo)記的線。

線性儀表圖類型是一種有效的可視化表示，用于顯示值與所需數(shù)據(jù)點(diǎn)的接近程度或距離程度。

線性儀表的類型

幾種類型的線性儀表是溫度計(jì)圖、子彈圖、儲罐圖和 LED 圖表。水銀溫度計(jì) - 由顯示溫度和指針值的小刻度組成 - 是線性儀表圖的經(jīng)典示例。

我們將要構(gòu)建的線性儀表可視化

這是對最終線性儀表圖的先睹為快。按照本教程學(xué)習(xí)我們?nèi)绾问褂?JavaScript 構(gòu)建這個有趣且內(nèi)容豐富的線性儀表圖。

圖表控件AnyChart教程：在 JavaScript 中創(chuàng)建線性儀表圖

構(gòu)建 JavaScript 線性儀表的四個步驟

掌握一些使用 HTML 和 JavaScript 等技術(shù)的技能總是很有用的。但是在本教程中，我們使用了一個 JS 圖表庫，它可以更輕松地創(chuàng)建引人注目的圖表，例如線性儀表，即使只有最少的技術(shù)知識。

有幾個JavaScript 圖表庫可以輕松地可視化數(shù)據(jù)，這里我們使用AnyChart創(chuàng)建線性儀表圖。這個庫很靈活，有大量的文檔，并且包含一些很好的例子。此外，它有一個用于試驗(yàn)代碼的游樂場，可免費(fèi)用于非商業(yè)用途。如果您想購買許可版本，可以查看可用選項(xiàng)，如果您是教育組織或非營利組織，可以在此處聯(lián)系以獲取免費(fèi)許可。

制作 JavaScript 線性儀表的步驟

這些是創(chuàng)建線性儀表圖的基本步驟：

創(chuàng)建一個基本的 HTML 頁面。
包括必要的 JavaScript 文件。
添加數(shù)據(jù)。
為圖表編寫 JavaScript 代碼。

讓我們在下面詳細(xì)了解這些步驟中的每一個。

1. 創(chuàng)建一個基本的 HTML 頁面

我們需要做的第一件事是制作一個 HTML 頁面來保存我們的可視化。我們添加一個<div>塊元素并給它一個 ID，以便我們稍后引用它：

<html lang="en">
  <head>
    <title>JavaScript Linear Gauge</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>

寬度和高度屬性<div>設(shè)置為 100%，以便在整個屏幕上呈現(xiàn)圖表。這些屬性可以根據(jù)需要進(jìn)行修改。

2. 包含必要的 JavaScript 文件

下一步是在 HTML 頁面中引用 JS 鏈接。我們將在本教程中使用 AnyChart 庫，因此讓我們包含來自其CDN的相應(yīng)文件。

要創(chuàng)建線性儀表圖，我們需要添加三個腳本：核心模塊、線性儀表模塊和表格模塊：

<html lang="en">
  <head>
    <title>JavaScript Linear Gauge</title>
    <style type="text/css">
      html, body, #container { 
        width: 100%; height: 100%; margin: 0; padding: 0; 
      } 
    </style>
  </head>
  <body>  
    <div id="container"></div>
    <script>
      // All the code for the JS linear gauge will come here
    </script>
    <script src="http://cdn.anychart.com/releases/8.10.0/js/anychart-core.min.js"></script>
    <script src="http://cdn.anychart.com/releases/8.10.0/js/anychart-linear-gauge.min.js"></script>
    <script src="http://cdn.anychart.com/releases/8.10.0/js/anychart-table.min.js"></script>
  </body>
</html>

3. 添加數(shù)據(jù)值

線性儀表圖的數(shù)據(jù)是從Our World in Data 中收集的，并包含在代碼中。在那個網(wǎng)站上，我們可以看到全世界每個大陸接受一劑和兩劑 Covid疫苗的人的百分比。

因?yàn)椋ㄔ谧珜懕疚臅r）沒有一個數(shù)字大于 50%，所以我們將所有線性儀表的軸的最大限制保持為 50%，并且我們比較了每個大陸與該標(biāo)記的距離，以及全球數(shù)字。我們用 LED 表示至少部分接種疫苗的數(shù)字，并用條形指針表示完全接種疫苗的數(shù)字。我們將看到如何在最后一步添加數(shù)據(jù)。

那么，我們的初始步驟都完成了，現(xiàn)在讓我們添加代碼來使用 JavaScript 制作線性儀表圖！

4. 為圖表編寫 JavaScript 代碼

在添加任何代碼之前，我們將所有內(nèi)容都包含在一個函數(shù)中，以確保其中的整個代碼僅在頁面加載后才執(zhí)行。

創(chuàng)建線性儀表圖涉及幾個步驟，并且比其他基本圖表類型要復(fù)雜一些。但這并不意味著它非常困難，我們將通過每一步來了解圖表是如何制作的。

定義儀表圖的線性刻度和軸

我們的圖表中有多個指針。因此，讓我們從創(chuàng)建一個接受兩個值的函數(shù)開始：一個用于條形指針，另一個用于 LED 儀表。然后我們將創(chuàng)建一個儀表，設(shè)置數(shù)據(jù)，并將布局指定為水平。接下來，我們將設(shè)置刻度和軸的范圍。我們將制作一個帶有最小和最大范圍的線性比例尺。對于軸，我們將定義屬性并設(shè)置方向：

function drawGauge(value, settings) {
  // Create gauge with settings
  const gauge = anychart.gauges.linear();
  gauge.data([value, settings.value]);
  gauge.layout('horizontal');

  // Set scale for gauge
  const scale = anychart.scales.linear();
  scale.minimum(0).maximum(settings.maximum).ticks({ interval: 2 });

  // Set axis for gauge
  const axis = gauge.axis(0);
  axis.width('1%').offset('43%').scale(scale).orientation('bottom');
}

設(shè)置條形指針和標(biāo)簽

現(xiàn)在，我們將為條形系列創(chuàng)建條形指針和標(biāo)簽。標(biāo)簽被賦予一個偏移量以避免與指針重疊：

// Create and set bar point
const barSeries = gauge.bar(0);

barSeries
  .scale(scale)
  .width('4%');

// Create and set label with actual data
const labelBar = barSeries.labels();
labelBar
  .enabled(true)
  .offsetY('-15px');

創(chuàng)建 LED 指針并設(shè)置顏色屬性

在 LED 點(diǎn)中，我們將指定點(diǎn)之間的間隙，并使用 dimmer 屬性設(shè)置剩余 LED 點(diǎn)的顏色以指示不亮效果。我們還將聲明點(diǎn)亮的 LED 點(diǎn)的色階：

// Create and set LED point
const ledPointer = gauge.led(1);

ledPointer
  .offset('10%')
  .width('30%')
  .count(settings.maximum)
  .scale(scale)
  .gap(0.55)
  .dimmer(function () {
    return '#eee';
  });

ledPointer.colorScale().colors(['#63b39b', '#63b39b']);

用每個數(shù)據(jù)點(diǎn)的目標(biāo)值聲明儀表

為了制作每個大陸的線性儀表，我們將為每個區(qū)域及其數(shù)據(jù)調(diào)用上面定義的函數(shù)。第一個數(shù)字表示目標(biāo)值數(shù)據(jù)，第二個變量是帶有 LED 數(shù)據(jù)的對象。在maximum保持恒定的50，而value完全接種群體的每個數(shù)據(jù)點(diǎn)的百分比值。該值將由指針顯示：

// Create gauges
const world = drawGauge(13.68, { maximum: 50, value: 27.13 });
const europe = drawGauge(36.98, { maximum: 50, value: 47.28 });
const nAmerica = drawGauge(36.77, { maximum: 50, value: 46.53 });
const sAmerica = drawGauge(22.8, { maximum: 50, value: 40.54 });
const asia = drawGauge(10.14, { maximum: 50, value: 27.16 });
const oceania = drawGauge(9.75, { maximum: 50, value: 22.12 });
const africa = drawGauge(1.56, { maximum: 50, value: 3.04 });

設(shè)置線性儀表的布局

要顯示每個線性儀表，我們將定義一個表格并將標(biāo)題與每個數(shù)據(jù)點(diǎn)一起添加為單獨(dú)的行。我們將添加布局的各種屬性，例如對齊方式和字體大小。我們還將為第一行定義參數(shù)，因?yàn)樗菢?biāo)題，并將第一列的寬度屬性設(shè)置為 100%，因?yàn)槲覀儾恍枰嗔校?/span>

// Create table to place gauges
const layoutTable = anychart.standalones.table();
layoutTable
  .hAlign('right')
  .vAlign('middle')
  .fontSize(14)
  .cellBorder(null);

// Put gauges into the layout table
layoutTable.contents([
  [null, 'Covid-19 Vaccination - How far are we from the halfway mark?'],
  ['World', world],
  ['Europe', europe],
  ['North America', nAmerica],
  ['South America', sAmerica],
  ['Asia', asia],
  ['Oceania', oceania],
  ['Africa', africa]
]);

// Set height for first row in layout table
layoutTable
  .getRow(0)
  .height(50)
  .fontSize(22)
  .hAlign('center');

// Set the first column to 100% width
layoutTable.getCol(0).width(100);

繪制圖表

最后一步是引用<div>我們在上一步添加的容器，并繪制圖表：

// Set container id and initiate drawing
layoutTable.container('container');
layoutTable.draw();

就是這樣。我們現(xiàn)在有一個功能齊全且漂亮的 JavaScript 線性儀表圖！可以在CodePen [和AnyChart Playground ]上查看此線性儀表初始版本的代碼。

使圖表可訪問

確保盡可能多的人可以訪問圖表始終是一個好習(xí)慣。因此，請記住 a11y，我們制作了更適合屏幕閱讀器的線性儀表圖的基本版本。您可以在此處[或在AnyChart Playground上查看]，也可以在 AnyChart JavaScript 庫的文檔中閱讀有關(guān)此方面的更多信息。

自定義線性儀表

我們制作的默認(rèn)線性儀表圖現(xiàn)在看起來很棒，但進(jìn)行一些修改將提高可讀性并使圖表更加出色。JavaScript 庫不僅可以快速創(chuàng)建圖表，還可以根據(jù)需要自定義可視化效果。圖表庫提供了許多用于控制圖表行為和美感的配置選項(xiàng)。讓我們對當(dāng)前的線性儀表圖進(jìn)行一些小而有效的調(diào)整。

顏色修改

為了使線性儀表看起來更具凝聚力，讓我們將條形指針的顏色屬性設(shè)為 LED 點(diǎn)的較暗版本。我們將通過指定欄的填充和描邊屬性來實(shí)現(xiàn)：

// Create and set bar point
const barSeries = gauge.bar(0);
barSeries
  .scale(scale)
  .width('4%')
  .fill('#296953')
  .stroke('#296953');

向我們的線性儀表圖表添加圖例

由于我們?yōu)闂l形、點(diǎn)亮和不點(diǎn)亮的 LED 指針使用了不同的顏色，因此提供圖例來解釋顏色是一個很好的做法。我們將制作一個圖例并將其添加到圖表標(biāo)題下方：

// Create stand alone legend
const legend = anychart.standalones.legend();
legend
  .position('center')
  .items([
    { text: 'Fully vaccinated', iconFill: '#296953' },
    { text: 'Partially vaccinated', iconFill: '#63b39b' },
    { text: 'Not vaccinated', iconFill: '#eee' }
  ]);

工具提示格式

為了促進(jìn)更好的數(shù)據(jù)通信，讓我們通過以百分比形式顯示值并指示儀表的最大值為 50% 來格式化工具提示以使其更具信息性：

// Set gauge tooltip
gauge
  .tooltip()
    .useHtml(true)
    .titleFormat('{%Value} %')
  .format(
    'Maximum on scale: ' +
    settings.maximum +
    ' %'
  );

在CodePen [或AnyChart Playground ]上查看此版本的完整代碼。