彩票走势图

​图表控件AnyChart教程：在 JavaScript 中创建线性仪表图

翻译|使用教程|编辑：张莹心|2021-10-21 11:01:19.630|阅读 168 次

概述：本文将展示如何快速创建一个很酷的交互式线性仪表图，突出显示世界各地的 Covid-19 疫苗接种数据。我们的图表将使我们能够在撰写本文时可视化 Covid-19 疫苗接种的状态，并将显示两种类型的数据——显示我们离全球人口部分和完全接种疫苗的中间目标还有多远。

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

AnyChart是基于JavaScript (HTML5) 的图表控件。使用AnyChart控件，可创建跨浏览器和跨平台的交互式图表和仪表。AnyChart 图表目前已被很多知名大公司所使用，可用于仪表盘、报表、数据分析、统计学、金融等领域。

AnyChar HTML5图表高度可定制且高度兼容。拥有纯JavaScript API，AnyChart图表内置客户端数据实时更新，多层次向下钻区和具体参数更新。强大的主题引擎使你通过一系列图表进行独特的演示体验，而PDF和图像输出能产出图书质量打印文档。

点击下载AnyChart最新版

图表控件AnyChart教程：在 JavaScript 中创建线性仪表图

本文提供了一个易于遵循的指南，用于在 JavaScript 中构建交互式线性仪表图。我们将展示如何快速创建一个很酷的交互式线性仪表图，突出显示世界各地的 Covid-19 疫苗接种数据。我们的图表将使我们能够在撰写本文时可视化 Covid-19 疫苗接种的状态，并将显示两种类型的数据——显示我们离全球人口部分和完全接种疫苗的中间目标还有多远。

什么是线性仪表图？

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

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

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

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

线性仪表的类型

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

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

这是对最终线性仪表图的先睹为快。按照本教程学习我们如何使用 JavaScript 构建这个有趣且内容丰富的线性仪表图。

图表控件AnyChart教程：在 JavaScript 中创建线性仪表图

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

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

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

制作 JavaScript 线性仪表的步骤

这些是创建线性仪表图的基本步骤：

  1. 创建一个基本的 HTML 页面。
  2. 包括必要的 JavaScript 文件。
  3. 添加数据。
  4. 为图表编写 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&gt;设置为 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="//cdn.anychart.com/releases/8.10.0/js/anychart-core.min.js"></script>
    <script src="//cdn.anychart.com/releases/8.10.0/js/anychart-linear-gauge.min.js"></script>
    <script src="//cdn.anychart.com/releases/8.10.0/js/anychart-table.min.js"></script>
  </body>
</html>

3. 添加数据值

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

因为（在撰写本文时）没有一个数字大于 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');
}

设置条形指针和标签

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

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

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

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

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

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

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

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

设置线性仪表的布局

要显示每个线性仪表，我们将定义一个表格并将标题与每个数据点一起添加为单独的行。我们将添加布局的各种属性，例如对齐方式和字体大小。我们还将为第一行定义参数，因为它是标题，并将第一列的宽度属性设置为 100%，因为我们不需要更多列：
// 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();
就是这样。我们现在有一个功能齐全且漂亮的 JavaScript 线性仪表图！可以在CodePen [和AnyChart Playground ]上查看此线性仪表初始版本的代码。
图表控件AnyChart教程：在 JavaScript 中创建线性仪表图

使图表可访问

确保尽可能多的人可以访问图表始终是一个好习惯。因此，请记住 a11y，我们制作了更适合屏幕阅读器的线性仪表图的基本版本。您可以在此处[或在AnyChart Playground上查看]，也可以在 AnyChart JavaScript 库的文档中阅读有关此方面的更多信息。

自定义线性仪表

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

颜色修改

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

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

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

由于我们为条形、点亮和不点亮的 LED 指针使用了不同的颜色，因此提供图例来解释颜色是一个很好的做法。我们将制作一个图例并将其添加到图表标题下方：
// 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' }
  ]);

工具提示格式

为了促进更好的数据通信，让我们通过以百分比形式显示值并指示仪表的最大值为 50% 来格式化工具提示以使其更具信息性：
// Set gauge tooltip
gauge
  .tooltip()
    .useHtml(true)
    .titleFormat('{%Value} %')
  .format(
    'Maximum on scale: ' +
    settings.maximum +
    ' %'
  );
在CodePen [或AnyChart Playground ]上查看此版本的完整代码。

轴和标签格式

我们要做的最后一件事是将所有数据值显示为百分比值以避免任何混淆。我们还将在标题下方的表格中添加一个副标题作为一行，以指示值是百分比。最后一件事是用更粗的字体美化条形标签。

这个 JavaScript 线性仪表图的整个最终代码可以在CodePen [和AnyChart Playground ] 上找到。

图表控件AnyChart教程：在 JavaScript 中创建线性仪表图

更多AnyChart相关资源，请点击此处进行查看~   想要购买AnyChart正版授权的朋友可以。


标签：

本站文章除注明转载外，均为本站原创或翻译。欢迎任何形式的转载，但请务必注明出处、不得修改原文相关链接，如果存在内容上的异议请邮件反馈至chenjj@cahobeh.cn


为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP