第詳解如何在JavaScript中創(chuàng)建線性?xún)x表圖目錄什么是線性?xún)x表圖線性量規(guī)的類(lèi)型我們將要構(gòu)建的線性?xún)x表可視化構(gòu)建JavaScript線性?xún)x表1、創(chuàng)建一個(gè)基本的HTML頁(yè)面2、包含必要的JavaScript文件3、添加數(shù)據(jù)值4、為圖表編寫(xiě)JavaScript代碼結(jié)論我們將展示如何快速創(chuàng)建一個(gè)酷炫的交互式線性?xún)x表圖表，突出顯示世界各地的Covid-19疫苗接種數(shù)據(jù)。我們的圖表將使我們能夠在撰寫(xiě)本文時(shí)可視化Covid-19疫苗接種的狀態(tài)，并將顯示兩種類(lèi)型的數(shù)據(jù)顯示我們距離為全球人口部分和完全接種疫苗的中途目標(biāo)還有多遠(yuǎn)。

什么是線性?xún)x表圖

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

線性?xún)x表圖表示顯示所需值的垂直或水平線性刻度，帶有顏色刻度以及單個(gè)或多個(gè)指針?？梢愿鶕?jù)所表示的數(shù)據(jù)在軸上設(shè)置數(shù)據(jù)范圍的最小值和最大值。指針位置指示指標(biāo)的當(dāng)前值。

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

線性?xún)x表圖表類(lèi)型是一種有效的可視化表示，用于顯示值與所需數(shù)據(jù)點(diǎn)的距離。

線性量規(guī)的類(lèi)型

線性?xún)x表的幾種類(lèi)型是溫度計(jì)圖表，子彈圖表，坦克圖表和LED圖表。水銀溫度計(jì)由顯示溫度和指針值的小刻度組成是線性?xún)x表圖的典型例子。

我們將要構(gòu)建的線性?xún)x表可視化

這是最終線性?xún)x表圖的預(yù)覽。按照本教程了解我們?nèi)绾问褂肑avaScript構(gòu)建這個(gè)有趣且信息豐富的線性?xún)x表圖。

構(gòu)建JavaScript線性?xún)x表

掌握HTML和JavaScript等技術(shù)的技能總是很有用的。但在本教程中，我們使用了一個(gè)JS圖表庫(kù)，即使只需要很少的技術(shù)知識(shí)，也可以更輕松地創(chuàng)建像線性?xún)x表這樣的引人注目的圖表。

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

制作JavaScript線性?xún)x表的步驟

以下是創(chuàng)建線性?xún)x表圖的基本步驟：

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

讓我們?cè)谙旅嬖敿?xì)了解這些步驟中的每一個(gè)。

1、創(chuàng)建一個(gè)基本的HTML頁(yè)面

我們需要做的第一件事是制作一個(gè)HTML頁(yè)面來(lái)保存我們的可視化。我們添加一個(gè)div塊元素并給它一個(gè)ID，以便我們以后可以引用它：

htmllang="en"

head

titleJavaScriptLinearGauge/title

styletype="text/css"

html,body,#container{

width:100%;height:100%;margin:0;padding:0;

/style

/head

body

divid="container"/div

/body

/html

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

2、包含必要的JavaScript文件

下一步是在HTML頁(yè)面中引用JS鏈接。我們將在本教程中使用AnyChart庫(kù)，所以讓我們從他們的CDN中包含相應(yīng)的文件。

要?jiǎng)?chuàng)建線性?xún)x表圖，我們需要添加三個(gè)腳本：核心模塊、線性?xún)x表模塊和表格模塊：

htmllang="en"

head

titleJavaScriptLinearGauge/title

styletype="text/css"

html,body,#container{

width:100%;height:100%;margin:0;padding:0;

/style

/head

body

divid="container"/div

script

//AllthecodefortheJSlineargaugewillcomehere

/script

scriptsrc="/releases/8.10.0/js/anychart-core.min.js"/script

scriptsrc="/releases/8.10.0/js/anychart-linear-gauge.min.js"/script

scriptsrc="/releases/8.10.0/js/anychart-table.min.js"/script

/body

/html

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

線性?xún)x表圖的數(shù)據(jù)是從OurWorldinData中收集的，并包含在代碼中。在該網(wǎng)站上，我們可以看到全世界每個(gè)大陸接種一劑和兩劑Covid疫苗的人的百分比。

因?yàn)?在撰寫(xiě)本文時(shí))沒(méi)有一個(gè)數(shù)字大于50%，我們將所有線性?xún)x表的軸的最大限制保持為50%，并且我們比較每個(gè)大陸與該標(biāo)記的距離，以及全球數(shù)字。我們用LED表示至少部分接種疫苗的數(shù)字，用條形指針表示完全接種疫苗的數(shù)字。我們將在最后一步看到如何添加數(shù)據(jù)。

那么，我們的初始步驟都完成了，現(xiàn)在讓我們添加代碼，用JavaScript制作一個(gè)線性?xún)x表圖!

4、為圖表編寫(xiě)JavaScript代碼

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

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

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

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

functiondrawGauge(value,settings){

//Creategaugewithsettings

constgauge=anychart.gauges.linear();

gauge.data([value,settings.value]);

gauge.layout('horizontal');

//Setscaleforgauge

constscale=anychart.scales.linear();

scale.minimum(0).maximum(settings.maximum).ticks({interval:2});

//Setaxisforgauge

constaxis=gauge.axis(0);

axis.width('1%').offset('43%').scale(scale).orientation('bottom');

}

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

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

//Createandsetbarpoint

constbarSeries=gauge.bar(0);

barSeries

.scale(scale)

.width('4%');

//Createandsetlabelwithactualdata

constlabelBar=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)的色標(biāo)：

//CreateandsetLEDpoint

constledPointer=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']);

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

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

//Creategauges

constworld=drawGauge(13.68,{maximum:50,value:27.13});

consteurope=drawGauge(36.98,{maximum:50,value:47.28});

constnAmerica=drawGauge(36.77,{maximum:50,value:46.53});

constsAmerica=drawGauge(22.8,{maximum:50,value:40.54});

constasia=drawGauge(10.14,{maximum:50,value:27.16});

constoceania=drawGauge(9.75,{maximum:50,value:22.12});

constafrica=drawGauge(1.56,{maximum:50,value:3.04});

設(shè)置線性?xún)x表的布局

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

//Createtabletoplacegauges

constlayoutTable=anychart.standalones.table();

layoutTable

.hAlign('right')

.vAlign('middle')

.fontSize(14)

.cellBorder(null);

//Putgaugesintothelayouttable

layoutTable.contents([

[null,'Covid-19Vaccination-Howfararewefromthehalfwaymark'],

['World',world],

['Europe',europe],

['NorthAmerica',nAmerica],

['SouthAmerica',sAmerica],

['Asia',asia],

['Oceania',oceania],

['Africa',africa]

//Setheightforfirstrowinlayouttable

layoutTable

.getRow(0)

.height(50)

.fontSize(22)

.hAlign('center');

//Setthefirstcolumnto100%width

layoutTable.getCol(0).width(100);

繪制圖表

最后一步是引用我們?cè)谏弦徊街刑砑拥娜萜?，并繪制圖表：

//Setcontaineridandinitiatedrawing

layoutTable.container('container');

layoutTable.draw();

就是這樣。我們現(xiàn)在有一個(gè)功能齊全且美觀的JavaScript線性?xún)x表圖!可以在CodePen上查看此線性量規(guī)初始版本的代碼。

使圖表可訪問(wèn)

確保盡可能多的人可以訪問(wèn)圖表是一種很好的做法。因此，請(qǐng)記住a11y，我們制作了更適合屏幕閱讀器的線性?xún)x表圖的基本版本。您可以在此處查看此內(nèi)容，還可以在AnyChartJavaScript庫(kù)的文檔中閱讀有關(guān)此方面的更多信息。

自定義線性?xún)x表

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

顏色修改

為了使線性?xún)x表看起來(lái)更具凝聚力，讓我們將條形指針的顏色屬性設(shè)置為L(zhǎng)ED點(diǎn)的較暗版本。我們將通過(guò)指定欄的填充和描邊屬性來(lái)實(shí)現(xiàn)：

//Createandsetbarpoint

constbarSeries=gauge.bar(0);

barSeries

.scale(scale)

.width('4%')

.fill('#296953')

.stroke('#296953');

為我們的線性?xún)x表圖添加圖例

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

//Createstandalonelegend

constlegend=anychart.standalones.legend();

legend

.position('center')

.items([

{text:'Fullyvaccinated',iconFill:'#29695