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

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

翻译|使用教程|编辑：莫成敏|2020-06-24 11:52:34.130|阅读 176 次

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

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

相关链接：

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

点击下载AnyChart正式版

本教程分为上下两个部分内容，本文是下篇，内容紧接上文！

自定义JavaScript堆积面积图

不同的人很可能会为图表选择不同的功能和美观，更不用说您作为Web开发人员或数据可视化设计师可能会获得的不同任务。幸运的是，可以轻松修改由AnyChart支持的JS图表，以适应您的需求和偏好。我将向您展示如何立即执行一些快速自定义：

添加图例和动画。
将值更改为百分比。
配置工具提示，标记和标签。
更改颜色。

添加图例和动画

每个显示多个值的图表都应具有图例，以便于阅读。

添加以下代码以打开基于JS的堆积面积图的图例。

我还想通过添加动画来给这张图表一点哇的效果。您可以通过在图表的JavaScript代码中添加一小段代码来快速实现此目的：

查看结果，您可以在AnyChart Playground上找到带有图例和动画的JS堆叠区域图：

将值更改为百分比

现在，让我们将堆叠模式从值切换为百分比。这样，您可以可视化构图如何变化而与总数无关。

这很简单。要使JavaScript（HTML5）百分比堆叠的面积图可视化相同的数据，只需将“value”替换为“percent”：

// change the stacking mode to percent
chart.yScale().stackMode('percent');

该JS百分比堆积面积图可在AnyChart Playground上获得。

配置工具提示，标记和标签

让我们使图表在工具提示和图例中显示系列标题。有很多方法可以做到这一点。但是我也想修改点标记。因此，让我们创建一个辅助函数，您可以在其中编写自定义所有这些元素所需的代码：

// helper function to setup tooltip labels for all series and style markers
var setupSeriesLabels = function (series, name) {
  series.name(name)
};

在我要设置系列并添加相应标题的地方使用此功能：

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

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

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

现在，再次使用助手功能来设置标记样式。我要做的是使它们变成圆形，给它们指定特定的大小，并指定它们的笔触粗细和颜色。最后，我还将指定它们的zIndex()，以便它们出现在最前面。

这是代码：

// helper function to setup series and give them appropriate names in order to distinguish and label them properly
var setupSeries = function (series, name) {
  series.name(name)
  // setting the markers
  series.hovered().stroke('3 #fff 1');
  series.hovered().markers()
    .enabled(true)
    .type('circle')
    .size(4)
    .stroke('1.5 #fff');
  series.markers().zIndex(100);
};

经过这些更改后，图表的输出如下：

欢迎您在AnyChart Playground打开此自定义的JS百分比堆积面积图。

改变颜色

最后，我想将图表的颜色修改为对我来说更有意义的颜色。我要用红色阴影表示死亡，绿色表示恢复，蓝色表示活跃。随意提出自己的想法！

这是代码：

// create a series with the mapped active series
var actSeries = chart.splineArea(activeData)
.fill("#1E8FCD")
.stroke("#4b9bc6")
setupSeries(actSeries, 'Active');

// create a series with the mapped recovered data
var recSeries = chart.splineArea(recoveredData)
.fill("#B3C67D")
.stroke("#b9c1a0")
setupSeries(recSeries, 'Recovered');

// create a series with the mapped deaths data
var deathsSeries = chart.splineArea(deathsData)
.fill("#b3315d")
.stroke("#b5617d")
setupSeries(deathsSeries, 'Deaths');

看看我在一开始在GIF中显示的最终交互式JavaScript堆积百分比百分比图表：

您可以在下面找到此数据可视化的全部代码，并在AnyChart Playground上找到最终的JS百分比堆积面积图：

<!DOCTYPE html>
<html lang="en">

<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 area chart type
    var chart = anychart.area();

    // helper function to setup series and give them appropriate names in order to distinguish and label them properly
    var setupSeries = function (series, name) {
      series.name(name)
      // setting the markers
      series.hovered().stroke('3 #fff 1');
      series.hovered().markers()
        .enabled(true)
        .type('circle')
        .size(4)
        .stroke('1.5 #fff');
      series.markers().zIndex(100);
    };

    // create a series with the mapped active data
    var actSeries = chart.splineArea(activeData)
    .fill("#1E8FCD")
    .stroke("#4b9bc6")
    setupSeries(actSeries, 'Active');

    // create a series with the mapped recovered data
    var recSeries = chart.splineArea(recoveredData)
    .fill("#B3C67D")
    .stroke("#b9c1a0")
    setupSeries(recSeries, 'Recovered');

    // create a series with the mapped deaths data
    var deathsSeries = chart.splineArea(deathsData)
    .fill("#b3315d")
    .stroke("#b5617d")
    setupSeries(deathsSeries, 'Deaths');
    
    // force the chart to stack values by the y scale
    chart.yScale().stackMode('percent');

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

    // turn on the legend
    chart.legend(true);

    // turn on the chart animation
    chart.animation(true);

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

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

</script>
</body>

</html>

结论

恭喜你！您刚刚建立了第一个JavaScript堆积面积图！这个过程不是很困难，不是吗？