如何在JavaScript中创建一个线性仪表图本文介绍了一个简单易行的指南，用于在JavaScript中建立一个互动的线

本文介绍了一个简单易行的指南，用于在JavaScript中建立一个互动的线性仪表图。

我们将展示如何快速创建一个很酷的互动式线性仪表图，以突出世界各地的Covid-19疫苗接种数据。我们的图表将使我们能够直观地看到撰写本报告时的Covid-19疫苗接种状况，并将显示两种类型的数据--显示我们距离全球人口部分和全部接种的半程目标有多远。

linear gauge cover image

什么是线性仪表图？

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

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

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

线性量表的图表类型是一种有效的视觉表现，用于显示数值与所需数据点的接近或远离程度。

线性量具的类型

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

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

下面是对最终的线性仪表图的偷窥。请跟随本教程学习我们如何用JavaScript构建这个有趣的、内容丰富的线性仪表图。

linear gauge chart final version

构建一个JavaScript线性仪表的四个步骤

掌握一些技术，如HTML和JavaScript，总是很有用的。但在本教程中，我们使用的是一个JS图表库，它可以使我们更容易地创建像线性仪表这样的引人注目的图表，即使只有很少的技术知识。

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

制作JavaScript线性测量仪的步骤

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

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

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

1.创建一个基本的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> 的宽度和高度属性被设置为100%，这样图表就可以在整个屏幕上呈现。这些属性可以根据需要进行修改。

2.列入必要的JavaScript文件

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

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

<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="https://cdn.anychart.com/releases/8.10.0/js/anychart-core.min.js"></script>
    <script src="https://cdn.anychart.com/releases/8.10.0/js/anychart-linear-gauge.min.js"></script>
    <script src="https://cdn.anychart.com/releases/8.10.0/js/anychart-table.min.js"></script>
  </body>
</html>

3.添加数据值

线性仪表图的数据从《我们的数据世界》中收集，并包含在代码中。在该网站上，我们可以看到全世界各大洲接种过一剂和两剂科维德疫苗的人的百分比。

因为（在写这篇文章时）没有一个数字大于50%，所以我们把所有线性仪表的轴的最大限度保持为50%，我们比较每个大陆离这个标记有多远，以及全球的数字。我们用LED表示至少部分接种的数字，用条形指针表示完全接种的数字。我们将在最后一步中看到数据是如何被添加的。

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

4.编写图表的JavaScript代码

在添加任何代码之前，我们把所有的东西都放在一个函数中，以确保里面的整个代码只在页面加载时才执行。

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

为仪表图定义线性刻度和坐标轴

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

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