图表控件AnyChart四步创建JS流程图教程-控件新闻-慧都网

图表控件AnyChart四步创建JS流程图教程

翻译|使用教程|编辑：杨鹏连|2021-07-22 11:17:07.467|阅读 295 次

概述：展示如何创建交互式 JS Flow Map 的分步教程。通过可视化移民美国的数据来说明。

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

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

点击下载AnyChart最新版

图表控件AnyChart四步创建JS流程图教程

展示如何创建交互式 JS Flow Map 的分步教程。通过可视化移民美国的数据来说明。

使用 JavaScript 为 Web 创建交互式 Flow Map 似乎很复杂。但事实并非如此！这个易于遵循的教程将向您展示如何轻松构建漂亮的 JS 流程图。

在疫情的这困难时期，全球人们对移民身份存在很多困惑和担忧。我决定看看美国的移民数据，美国的移民人数比世界上任何其他国家都多。在这里，我探讨了这些移民来自哪里，代表了 2019 年向美国贡献最多移民的前 15 个国家。

流程图似乎是展示从不同国家流入美国的移民的完美方式。在进一步讨论之前，让我简要介绍一下流程图及其用途。

什么是流程图？

Flow Maps 在地理上可视化对象的移动——例如，从一个位置到另一个位置的人或货物及其数量。

流图是一种连接器图，它是通过用指示流向的箭头或标记将放置在地图上的点连接起来的直线或曲线绘制的。通常，流量的大小用线的粗细表示。

这些地图中连接器的起点和终点由纬度和经度参数定义，因此有必要为每个连接器设置这些参数。请注意，应首先定义点的纬度，然后定义每个点的经度。

例如，这是我将在本教程结束时创建的流程图。[现在也可以在AnyChart Playground 上使用。]

使用 JavaScript 创建流程图

有很多优秀的JavaScript 图表库可用于创建引人注目的数据可视化。他们中的许多人提供了构建地图的能力并有自己的优势。因此，您可以使用最适合您的项目要求的库。

在本教程中，我使用AnyChart。它看起来最适合使用开箱即用的流程图选项和深入的文档来了解流程。

流程图比条形图或饼图等基本图表稍微复杂一些，但我将引导您完成代码行以使其更容易掌握。一些关于 HTML 和 JavaScript 的背景知识将帮助您更快地理解，但并不难。看看如何通过 4 个简单的步骤创建漂亮的交互式 JavaScript 流程图。

1. 创建一个 HTML 页面

第一步是创建一个空白的 HTML 页面，用于保存交互式流程图。将div具有唯一 id的元素添加到此页面，稍后将引用该元素。

我将 div 的宽度和高度设置为 100%，以便在整个屏幕上显示地图。这可以根据要求和偏好进行修改。

<html>
  <head>
    <title>JavaScript Flow Map</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>

2. 添加必要的脚本

要使用图表库构建数据可视化，您需要链接您正在使用的库的相应 JS 脚本。所有这些脚本文件都包含在 HTML 页面中。

为了创建 JS 流程图，我将添加 AnyChart 的“核心”和“地理地图”模块。

由于地图是整个世界的，我链接包含世界地理数据的文件，来自图书馆的地图集合，也可以在其CDN 上找到。

此外，我将使用另一个 JavaScript 库——Proj4js——简而言之，它负责绘制各个地理区域的坐标。

<html>
  <head>
    <title>JavaScript Flow Map</title>
    <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-map.min.js"></script>

    <script src="//cdn.anychart.com/geodata/latest/custom/world/world.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.15/proj4.js"></script>

    <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 flow map will come here
    </script>
  </body>
</html>

3. 连接数据

对于地图，数据需要具有纬度和经度坐标以及要显示的其他信息。我通过整理来自维基百科的移民信息并添加来自名为Latlong的站点的坐标来创建数据集。

对于流程图，我需要源国家和目的地国家的经纬度。在这里，所有数据点的目的地国家都是美国。要查看数据集的外观，您可以在此处找到该文件。

为了加载数据文件，我将在 HTML 页面的部分中包含 AnyChart的数据适配器模块<head>[并利用 HTML 页面正文中标记loadJsonFile() 内的方法 <script>来加载带有 JSON 数据的文件，用于流图可视化]。

<html>
  <head>
    <title>JavaScript Flow Map</title>
    <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-map.min.js"></script>

    <script src="//cdn.anychart.com/geodata/latest/custom/world/world.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.15/proj4.js"></script>

    <script src="//cdn.anychart.com/releases/8.10.0/js/anychart-data-adapter.min.js"></script>

    <style type="text/css">      
      html, body, #container { 
        width: 100%; height: 100%; margin: 0; padding: 0; 
      } 
    </style>
  </head>
  <body>  
    <div id="container"></div>
    <script>
      anychart.data.loadJsonFile('//gist.githubusercontent.com/shacheeswadia/a20ba5b62cef306ccc1a8e8857e5316a/raw/0337b16fa8dc4de97263bc0a4ededf935a529c35/migration-data.json', function (data) {
        // The JS flow map's code will come here
      });
    </script>
  </body>
</html>

4.编写JS代码绘制流程图

在此之前，我会将所有代码包含在anychart.onDocumentReady()函数中，以确保在执行任何操作之前页面已完全加载。接下来，我将使用anychart.data.loadJsonFile()函数加载数据。

现在，我使用连接器功能创建流图，因为这是一种连接器地图，然后设置地理数据以及设置以确保世界上的所有区域都清晰可见。

anychart.onDocumentReady(function () {
  anychart.data.loadJsonFile('//gist.githubusercontent.com/shacheeswadia/a20ba5b62cef306ccc1a8e8857e5316a/raw/0337b16fa8dc4de97263bc0a4ededf935a529c35/migration-data.json', function (data) {

    // сreate a connector map chart instance
    var map = anychart.connector();

    // include the world map geodata
    map.geoData('anychart.maps.world');

    // darken all regions
    map
      .unboundRegions()
      .enabled(true)
      .fill('#E1E1E1')
      .stroke('#D2D2D2');

  })
});

我为图表添加了一个标题并允许重叠，以便所有数据点及其标签都可以在地图上看到，即使它们重叠。

// set the map chart title
map
  .title('Migrations to the USA from the top 15 countries');

// display all labels even if there is an overlap
map 
  .overlapMode("allow-overlap");

现在是创建连接器系列的主要部分，它将代表各种连接。

为此，我创建了一个以数据为参数的辅助函数。在函数中，我创建了将形成连接线的系列，并在 100% 位置添加箭头标记，这是目的地，因为我们的流程是从各个来源国家到目的地国家 - 美国。

然后我添加显示来源国家/地区名称的标签。

// a helper function to create the series
// that will form the connector lines
var createSeries = function (data) {

  // create and customize the connector series
  var connectorSeries = map
    .connector(data);

  connectorSeries
    .markers()
    .position('100%')
    .size(10);

  // set the labels for the source countries
  connectorSeries
    .labels()
    .enabled(true)
    .format(function () {
      return this.getData('from');
    });

};

我现在设置数据并调用我使用该数据集作为参数创建的函数。最后一步是设置容器以引用之前添加的 div 并绘制地图。

// create a dataset from the data
var dataSet = anychart.data.set(data).mapAs();

createSeries(dataSet);

// set the container
map.container('container');

// draw the map
map.draw();

自定义 JS Flow Map

刚刚使用 JavaScript 构建的现有流程图很好地展示了大多数移民来自哪里。但是没有显示每个国家的移民数量。因此，我将自定义地图以显示这一点，并通过一些额外的代码使地图更具洞察力。我也会改进视觉美感并做一些其他的小改动。

A. 设置连接器的颜色和大小以及图例

我决定用连接线的粗细和调色板来表示从每个国家流向美国的移民数量。没有必要两者都做，因为可以使用任何一个指标，但我喜欢当两者都存在时，洞察力如何更容易阅读。

我修改了辅助函数以包含名称和颜色参数以及数据。我将使用名称来标识连接器系列并管理线条的粗细，而颜色变量将指示我在为每个系列调用函数时将指定的颜色。

然后我将名称和颜色添加到连接器系列，并添加悬停在线和标记的设置。

接下来，我根据系列的名称设置线条的粗细。这个命名是基于迁移的数量，一旦调用函数就会更清楚。

由于连接器系列根据数据具有不同的颜色，因此我添加了颜色图例。

如果这一切听起来很复杂，请不要不知所措。一旦您查看代码和注释以及每个片段，就会更有意义。

// a helper function to create the series
// that will form the connector lines
var createSeries = function (name, data, color) {

  // create and customize the connector series
  var connectorSeries = map
    .connector(data)
    .name(name)
    .fill(color)
    .stroke({
      color: color,
      thickness: 2
    });
  
  // change the coloring of the connector line in the hovered state
  connectorSeries
    .hovered()
    .stroke('1.5 #212121')
    .fill('#212121');

  // configure the arrow marker
  connectorSeries
    .markers()
    .position('100%')
    .fill(color)
    .stroke({
      color: color
    })
    .size(8);

  // configure the arrow marker in the hovered state
  connectorSeries
    .hovered()
    .markers()
    .position('100%')
    .size(10)
    .fill('#212121')
    .stroke('2 #455a64');

  // set the labels for the source countries
  connectorSeries
    .labels()
    .enabled(true)
    .format(function () {
      return this.getData('from');
    });

  // set the thickness of the connector line based on the series
  if (name === 'More than 50,000') {
    connectorSeries.startSize(5).endSize(2);
  } else if (name === '40,000 to 50,000') {
    connectorSeries.startSize(3.5).endSize(1.5);
  } else if (name === '20,000 to 40,000') {
    connectorSeries.startSize(3).endSize(1);
  } else if (name === '16,000 to 20,000') {
    connectorSeries.startSize(2).endSize(0.5);
  } else {
    connectorSeries.startSize(1).endSize(0);
  }

  // configure the settings for the legend items
  connectorSeries
    .legendItem()
    .iconType('square')
    .iconFill(color)
    .iconStroke(false);

};

在继续之前，我将创建另一个辅助函数，它是一个过滤器函数，用于分离每个系列中的数据。我将在代码的末尾添加这个函数。

// a helper function to bind the data field to the local var.
function filterFunction(val1, val2) {
  if (val2) {
    return function (fieldVal) {
      return val1 <= fieldVal && fieldVal < val2;
    };
  }
  return function (fieldVal) {
    return val1 <= fieldVal;
  };
}

现在，我基于总移民数据创建了 5 个不同的系列，为每个系列指定一个唯一名称，根据数据集中的总数字段为每个系列过滤数据，并提供唯一颜色值作为第三个参数。这将根据总迁移数据创建 5 个具有不同厚度和颜色的连接器系列组。

// create five series filtering the data
// by the absolute values of the migration numbers
createSeries(
  'Less than 16,000',
  dataSet.filter('total', filterFunction(0, 16000)),
  '#fed693'
);
createSeries(
  '16,000 to 20,000',
  dataSet.filter('total', filterFunction(16000, 20000)),
  '#f5ad52'
);
createSeries(
  '20,000 to 40,000',
  dataSet.filter('total', filterFunction(20000, 40000)),
  '#3fb8c5'
);
createSeries(
  '40,000 to 50,000',
   dataSet.filter('total', filterFunction(40000, 50000)),
   '#1792c0'
);
createSeries(
  'More than 50,000',
  dataSet.filter('total', filterFunction(50000, 1000000)),
  '#1c5eaa'
);

由于我添加了图例，因此我为地图启用了它并为图例添加了标题。

// set up the legend for the sample
map
  .legend()
  .enabled(true)
  .position('center')
  .padding([20, 0, 20, 0])
  .fontSize(10);

map
  .legend()
  .title()
  .enabled(true)
  .fontSize(13)
  .padding([0, 0, 5, 0])
  .text('Number of Migrants (in the year 2019)');

请注意，图例是交互式的。因此，您可以将鼠标悬停在图例的每个元素上，相应的系列组将突出显示。您还可以单击图例元素以添加或删除该特定系列组。这是 JS 图表库的所有内置功能。

B. 完善提示信息

JavaScript 流程图的默认工具提示显示源和目标的纬度和经度。这些信息对我们没有任何用处。因此，我自定义了工具提示以显示该国家/地区的名称和来自该国家/地区的移民总数。

我使用 HTML 作为工具提示，使我能够设置文本格式。这使得工具提示更具信息性和吸引力。

// configure the tooltip setting for the series
connectorSeries
  .tooltip()
  .useHtml(true)
  .format(function () {
    return (
      '<h4 style="font-size:14px; font-weight:400; margin: 0.25rem 0;">From:<b> ' + this.getData('from') + '</b></h4>' +
      '<h4 style="font-size:14px; font-weight:400; margin: 0.25rem 0;">Total Migrants::<b>' + this.getData('total').toLocaleString() + '</b></h4>'
    );
  });

C. 加强标题和标签

最后，我进行了一些简单的修改，以增强地图的美感并为标题添加一些见解。
我再次使用 HTML 格式化标题并添加副标题，以使文本的样式可自定义。

// set the map chart title
map
  .title()
  .enabled(true)
  .useHtml(true)
  .padding([0, 0, 40, 0])
  .text(
    '<span style="color:#212121;">Migrations to the USA from the top 15 countries</span><br/>' +
    '<span style="font-size: 14px;">Majority of the migrants come from Mexico, Asia and South America</span>'
  );

最后，我将地图图例移到底部并使标签颜色变暗以使其更加突出。