详解如何在JavaScript中创建线性仪表图

第详解如何在JavaScript中创建线性仪表图目录什么是线性仪表图线性量规的类型我们将要构建的线性仪表可视化构建JavaScript线性仪表1、创建一个基本的HTML页面2、包含必要的JavaScript文件3、添加数据值4、为图表编写JavaScript代码结论我们将展示如何快速创建一个酷炫的交互式线性仪表图表，突出显示世界各地的Covid-19疫苗接种数据。我们的图表将使我们能够在撰写本文时可视化Covid-19疫苗接种的状态，并将显示两种类型的数据显示我们距离为全球人口部分和完全接种疫苗的中途目标还有多远。

什么是线性仪表图

鉴于正在创建的大量数据以及从数据中收集信息的众多可能性，数据可视化是一种非常宝贵的工具。数据可视化对于识别趋势、解释模式以及向目标受众传达复杂的想法特别有用。

线性仪表图表示显示所需值的垂直或水平线性刻度，带有颜色刻度以及单个或多个指针。可以根据所表示的数据在轴上设置数据范围的最小值和最大值。指针位置指示指标的当前值。

仪表图可以使用单个指针或标记组合显示单个值或多个值。指针可以是带有任何形状标记的针或线，例如圆形、正方形、矩形或三角形。

线性仪表图表类型是一种有效的可视化表示，用于显示值与所需数据点的距离。

线性量规的类型

线性仪表的几种类型是温度计图表，子弹图表，坦克图表和LED图表。水银温度计由显示温度和指针值的小刻度组成是线性仪表图的典型例子。

我们将要构建的线性仪表可视化

这是最终线性仪表图的预览。按照本教程了解我们如何使用JavaScript构建这个有趣且信息丰富的线性仪表图。

构建JavaScript线性仪表

掌握HTML和JavaScript等技术的技能总是很有用的。但在本教程中，我们使用了一个JS图表库，即使只需要很少的技术知识，也可以更轻松地创建像线性仪表这样的引人注目的图表。

有几个JavaScript图表库可以轻松地可视化数据，这里我们使用AnyChart创建线性仪表图。这个库很灵活，有大量的文档，它包含一些很好的例子。此外，它还有一个用于试验代码的游乐场，并且可以免费用于非商业用途。如果您想购买许可版本，您可以查看可用选项，如果您是教育机构或非营利组织，您可以在此处联系以获取免费许可。

制作JavaScript线性仪表的步骤

以下是创建线性仪表图的基本步骤：

创建一个基本的HTML页面。包括必要的JavaScript文件。添加数据。为图表编写JavaScript代码。

让我们在下面详细了解这些步骤中的每一个。

1、创建一个基本的HTML页面

我们需要做的第一件事是制作一个HTML页面来保存我们的可视化。我们添加一个div块元素并给它一个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

的宽度和高度属性设置为100%，以便图表在整个屏幕上呈现。这些属性可以根据需要进行修改。

2、包含必要的JavaScript文件

下一步是在HTML页面中引用JS链接。我们将在本教程中使用AnyChart库，所以让我们从他们的CDN中包含相应的文件。

要创建线性仪表图，我们需要添加三个脚本：核心模块、线性仪表模块和表格模块：

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、添加数据值

线性仪表图的数据是从OurWorldinData中收集的，并包含在代码中。在该网站上，我们可以看到全世界每个大陆接种一剂和两剂Covid疫苗的人的百分比。

因为(在撰写本文时)没有一个数字大于50%，我们将所有线性仪表的轴的最大限制保持为50%，并且我们比较每个大陆与该标记的距离，以及全球数字。我们用LED表示至少部分接种疫苗的数字，用条形指针表示完全接种疫苗的数字。我们将在最后一步看到如何添加数据。

那么，我们的初始步骤都完成了，现在让我们添加代码，用JavaScript制作一个线性仪表图!

4、为图表编写JavaScript代码

在添加任何代码之前，我们将所有内容封装在一个函数中，以确保其中的整个代码仅在页面加载后执行。

创建线性仪表图涉及几个步骤，并且比其他基本图表类型更复杂一些。但这并不意味着它非常困难，我们将通过每一步来了解图表是如何制作的。

定义仪表图的线性刻度和轴

我们的图表中有多个指针。因此，让我们从创建一个接受两个值的函数开始：一个用于条形指针，一个用于LED仪表。然后我们将创建一个仪表，设置数据，并将布局指定为水平。接下来，我们将设置刻度和轴的范围。我们将制作出具有最小和最大范围的线性比例。对于轴，我们将定义属性并设置方向：

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');

}

设置条形指针和标签

现在，我们将为条形系列创建条形指针和标签。给标签一个偏移量以避免与指针重叠：

//Createandsetbarpoint

constbarSeries=gauge.bar(0);

barSeries

.scale(scale)

.width('4%');

//Createandsetlabelwithactualdata

constlabelBar=barSeries.labels();

labelBar

.enabled(true)

.offsetY('-15px');

创建LED指针并设置颜色属性

在LED点中，我们将指定点之间的间隙，并使用dimmer属性设置剩余LED点的颜色以指示不亮的效果。我们还将声明点亮的LED点的色标：

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

用每个数据点的目标值声明仪表

为了为每个大陆制作线性仪表，我们将为每个区域调用上面定义的函数及其数据。第一个数字表示目标值数据，第二个变量是带有LED数据的对象。maximum保持恒定50，而是value每个数据点的完全接种疫苗人口的百分比值。该值将由指针显示：

//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});

设置线性仪表的布局

为了在另一个下显示每个线性仪表，我们将定义一个表格并将标题与每个数据点一起添加为单独的行。我们将添加布局的各种属性，例如对齐方式和字体大小。我们还将为第一行定义参数，因为它是标题，并将第一列的宽度属性设置为100%，因为我们不再需要任何列：

//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);

绘制图表

最后一步是引用我们在上一步中添加的容器，并绘制图表：

//Setcontaineridandinitiatedrawing

layoutTable.container('container');

layoutTable.draw();

就是这样。我们现在有一个功能齐全且美观的JavaScript线性仪表图!可以在CodePen上查看此线性量规初始版本的代码。

使图表可访问

确保尽可能多的人可以访问图表是一种很好的做法。因此，请记住a11y，我们制作了更适合屏幕阅读器的线性仪表图的基本版本。您可以在此处查看此内容，还可以在AnyChartJavaScript库的文档中阅读有关此方面的更多信息。

自定义线性仪表

我们制作的默认线性仪表图表现在看起来很棒，但是进行一些修改将增强可读性并使图表更加出色。JavaScript库不仅非常适合快速创建图表，还适合根据需要自定义可视化。图表库提供了许多用于控制图表行为和美观的配置选项。让我们对当前的线性仪表图进行一些小而有效的调整。

颜色修改

为了使线性仪表看起来更具凝聚力，让我们将条形指针的颜色属性设置为LED点的较暗版本。我们将通过指定栏的填充和描边属性来实现：

//Createandsetbarpoint

constbarSeries=gauge.bar(0);

barSeries

.scale(scale)

.width('4%')

.fill('#296953')

.stroke('#296953');

为我们的线性仪表图添加图例

由于我们为条形图、亮起和不亮起的LED指针使用了不同的颜色，因此最好提供一个图例来解释颜色。我们将制作一个图例并将其添加到图表标题下方：

//Createstandalonelegend

constlegend=anychart.standalones.legend();

legend

.position('center')

.items([

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