跨平台图表控件Anychart教程：如何使用JavaScript创建堆积面积图（上）-控件新闻-慧都网

跨平台图表控件Anychart教程：如何使用JavaScript创建堆积面积图（上）

翻译|使用教程|编辑：莫成敏|2020-06-19 13:33:37.087|阅读 313 次

概述：堆叠的面积图是经典面积图的一种变体，是一种非常流行的数据可视化形式。它们非常适合以图形方式表示多个变量及其总数如何随时间变化。在本教程中，我将向您展示如何轻松地创建交互式JavaScript堆叠面积图，该图在任何HTML5项目、网站或应用中都具有吸引力。

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

相关链接：

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

点击下载AnyChart正式版

堆叠的面积图是经典面积图的一种变体，是一种非常流行的数据可视化形式。它们非常适合以图形方式表示多个变量及其总数如何随时间变化。在本教程中，我将向您展示如何轻松地创建交互式JavaScript堆叠面积图，该图在任何HTML5项目、网站或应用中都具有吸引力。

为了演示这种方法，即使您仅具备基本的HTML编码技能，这也很容易掌握，我将以可视化的方式显示有关意大利爆发COVID-19大流行的官方数据。教程中建立的可视化文件将显示病例、康复和死亡人数的变化-从1月31日（确认前两个病例）到6月9日，意大利的新冠病毒病例总数已达到235,561。

构建JS堆积面积图的4个步骤

任何JavaScript图形（包括堆积面积图）的开发都可以分为以下四个基本步骤：

为图表创建一个HTML页面。
添加必要的JavaScript文件。
设置数据。
编写图表的JS代码。

让我们开始制作一个基于值的基本JS堆叠面积图。然后，我将向您展示如何自定义它以适合您自己的需求和任务。最终的数据可视化示例将是以下JavaScript百分比堆叠面积图：

现在，让我们开始吧！

步骤1：建立HTML网页

首先创建一个基本的HTML页面。该页面应包含以下内容：

相关标题。
一个HTML块元素（例如<div>）将存储您的图表。
<div>的id属性（例如，“容器”）。

请注意，您还可以在<style>块中添加CSS规则，以修改堆积面积图将占据的空间。如果您希望图形填充整个页面，请对width和height参数使用100％。

HTML页面应如下所示：

<!DOCTYPE html>
<html>

<head>
  <title>Stacked Area Chart</title>
  <style>
    html,
    body,
    #container {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
</head>

<body>
<div id="container"></div>
</body>

</html>

步骤2：添加必要的JavaScript文件

现在，您应该在<head>部分中引用所有必需的JS文件。

我将在本教程中向您展示的堆积面积图基于AnyChart的JS库。通常，JavaScript库使您可以更快、更轻松地生成所需的输出。AnyChart轻巧灵活，因此您可以发挥自己的创意，并提供功能齐全且响应迅速的图表以在您的网站或应用程序上使用。

对于本图表教程，我将包括相应的CDN链接。如果愿意，可以在本地下载脚本。

AnyChart JavaScript库具有模块化系统，有助于优化网页上运行的JS代码的大小。要使用它制作堆积面积图，请添加两个模块：“Core”和“Basic Cartesian”。第一个是使用任何其他模块所需的基本AnyChart模块。第二个模块为所有Cartesian图表提供动力。

这是到目前为止的HTML代码：

<!DOCTYPE html>
<html>

<head>
  <title>
Stacked Area Chart</title>
  <script src="//cdn.anychart.com/releases/8.8.0/js/anychart-core.min.js"></script>
  <script src="//cdn.anychart.com/releases/8.8.0/js/anychart-cartesian.min.js"></script>
  <style>
    html,
    body,
    #container {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
</head>

<body>
  <div id="container"></div>
  <script>
    // The stacked area chart's JS code will be written here.
  </script>
</body>

</html>

步骤3：添加数据以可视化

加载数据

COVID-19大流行是全球头号新闻。在本教程中，我决定重点关注意大利，这是中国以外的第一个受到此次危机严重影响的地区。我将可视化数据与活跃病例、康复和死亡人数之间的关系，以了解从意大利疫情爆发到现在的情况。

我从Johns Hopkins CSSE 数据集中获取了数据，该数据被认为是COVID-19官方统计的可靠来源。为了简单起见，我将意大利语数据放在一个CSV文件中，您可以在此处找到。有效病例是通过从确诊病例中减去死亡和康复来计算的。

可以在数据适配器模块的帮助下将CSV文件加载到 AnyChart中，除了已经在其中引用的库脚本之外，您还应该在<head>部分中引用该模块：

<!DOCTYPE html>
<html>

<head>
  <title>Stacked Area Chart</title>
  <script src="//cdn.anychart.com/releases/8.8.0/js/anychart-core.min.js"></script>
  <script src="//cdn.anychart.com/releases/8.8.0/js/anychart-cartesian.min.js"></script>
  <script src="//cdn.anychart.com/releases/8.8.0/js/anychart-data-adapter.min.js"></script>
  <style>
    html,
    body,
    #container {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
</head>

<body>
  <div id="container"></div>
  <script>
    // The stacked area chart's JS code will be written here.
  </script>
</body>

</html>

现在，您可以使用数据适配器提供的loadCsvFile方法来加载CSV数据。

anychart.data.loadCsvFile ("//static.anychart.com/git-storage/word-press/data/covid-19-italy/data.csv", function (data) {
});

然后，将数据设置为可以在将来的基于JavaScript的堆积面积图中使用：

anychart.data.loadCsvFile ("//static.anychart.com/git-storage/word-press/data/covid-19-italy/data.csv", function (data) {
  // set the data and ignore the first row that contains headers
  var dataSet = anychart.data.set(data, {ignoreFirstRow: true});
});

映射数据

该图表将显示来自三个字段的数据：活动案例，恢复和死亡。因此，您将需要三个不同的数据系列，每个字段一个。但是，您将如何“告知”图表每个字段要使用哪些数据？

这是数据映射起作用的地方！通过调用mapAs方法观察如何在代码中实现这一点：

// map data for the deaths series
var deathsData = dataSet.mapAs({ 'x': 0, 'value': 2 });

// map data for the recovered series
var recoveredData = dataSet.mapAs({ 'x': 0, 'value': 3 });

// map data for the active series
var activeData = dataSet.mapAs({ 'x': 0, 'value': 4 });

步骤4：为图表编写JS代码

现在一切似乎都准备就绪，您就可以开始编写JS堆叠面积图可视化代码了。

首先，添加anychart.onDocumentReady函数，该函数将封装图表的全部代码，并在页面准备好后执行。

<script>

anychart.onDocumentReady(function () {
  // The stacked area chart's code will be written here.
});

</script>

接下来，添加步骤3中的数据：

<script>

anychart.onDocumentReady(function () {
  anychart.data.loadCsvFile ("//static.anychart.com/git-storage/word-press/data/covid-19-italy/data.csv", function (data) {
    // set the data and ignore the first row that contains headers
    var dataSet = anychart.data.set(data, {ignoreFirstRow: true});
  });
});

</script>

然后，指定图表类型，设置序列并强制图表按Y比例堆叠值：

// specify the area chart type
var chart = anychart.area();

// create a series with the mapped active data
var actSeries = chart.splineArea(activeData);

// create a series with the mapped recovered data
var recSeries = chart.splineArea(recoveredData);

// create a series with the mapped deaths data
var deathsSeries = chart.splineArea(deathsData);

// force the chart to stack values by the y scale
chart.yScale().stackMode('value');

为了清楚起见，让我们为其命名并命名其坐标轴：

// set the chart title
chart.title('Covid-19 in Italy');

// set the labels of the axes
chart.xAxis().title("Date");
chart.yAxis().title("Number of people");

还有一件事：我还想添加一条垂直线，该垂直线将随鼠标移动，这将使人们更容易一目了然。在AnyChart中，只需使用十字线功能。以下代码显示了如何启用十字准线以及一些其他样式：

// turn on the crosshair
var crosshair = chart.crosshair();
crosshair.enabled(true)
  .yStroke(null)
  .xStroke('#fff')
  .zIndex(39);
crosshair.yLabel().enabled(false);

最后，将图表放入容器中并使用绘图命令来绘制图表。

// set the container id for the chart
chart.container('container');

// initiate chart drawing
chart.draw();

享受结果：

通过输出可以了解活动案例、恢复和死亡的数量如何随时间变化。总数为所有确诊病例。您可以将鼠标移到图表上并查看每个点的确切值。注意十字准线如何帮助您了解每天的信息！

为了您的方便，完整代码如下。随时在AnyChart Playground上玩这个基本的JS堆积面积图。

<!DOCTYPE html>
<html>

<head>
  <title>Stacked Area Chart</title>
  <script src="//cdn.anychart.com/releases/8.8.0/js/anychart-core.min.js"></script>
  <script src="//cdn.anychart.com/releases/8.8.0/js/anychart-data-adapter.min.js"></script>
  <script src="//cdn.anychart.com/releases/8.8.0/js/anychart-cartesian.min.js"></script>
  <style>
    html,
    body,
    #container {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
</head>

<body>
  <div id="container"></div>
  <script>

anychart.onDocumentReady(function () {
  anychart.data.loadCsvFile("//static.anychart.com/git-storage/word-press/data/covid-19-italy/data.csv", function (data) { 
    // set the data and ignore the first row that contains headers
    var dataSet = anychart.data.set(data, {ignoreFirstRow: true});

    // map data for the deaths series
    var deathsData = dataSet.mapAs({ 'x': 0, 'value': 2 });

    // map data for the recovered series
    var recoveredData = dataSet.mapAs({ 'x': 0, 'value': 3 });

    // map data for the active series
    var activeData = dataSet.mapAs({ 'x': 0, 'value': 4 });

    // specify the chart type
    var chart = anychart.area();

    // create a series with the mapped active data
    var actSeries = chart.splineArea(activeData);

    // create a series with the mapped recovered data
    var recSeries = chart.splineArea(recoveredData);

    // create a series with the mapped deaths data
    var deathsSeries = chart.splineArea(deathsData);

    // force the chart to stack values by the y scale
    chart.yScale().stackMode('value');

    // set the chart title
    chart.title('Covid-19 in Italy');

    // set the labels of the axes
    chart.xAxis().title("Date");
    chart.yAxis().title("Number of people");

    // turn on the crosshair
    var crosshair = chart.crosshair();
    crosshair.enabled(true)
      .yStroke(null)
      .xStroke('#fff')
      .zIndex(39);
    crosshair.yLabel().enabled(false);

    // set the container id for the chart
    chart.container('container');

    // initiate chart drawing
    chart.draw();
  });
});

</script>
</body>

</html>

本教程内容尚未完结，敬请期待后续更新内容！

想要购买AnyChart正版授权，或了解更多产品信息请点击