图表控件AnyChart如何使用JavaScript创建瀑布图-控件新闻-慧都网

图表控件AnyChart如何使用JavaScript创建瀑布图

翻译|使用教程|编辑：杨鹏连|2021-03-22 10:08:19.227|阅读 239 次

概述：您是否想知道如何使用JavaScript轻松地将瀑布图添加到网页或应用程序？本教程将确保您准备好自信地应对这种交互式数据可视化开发！

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

点击下载AnyChart正式版

JSççå¸å¾

您是否想知道如何使用JavaScript轻松地将瀑布图添加到网页或应用程序？本教程将确保您准备好自信地应对这种交互式数据可视化开发！

瀑布图说明了在一系列中间加法（正值）和减法（负值）之间，起始值如何变为最终值。这些加法和减法可以是基于时间的，也可以表示诸如多种收入来源和支出之类的类别。在金融领域，瀑布图通常被称为桥梁。您可能还听说过它称为级联，马里奥或飞砖图。

要查看实际中的瀑布图并学习如何使用JavaScript（HTML5）构建瀑布图，我们需要一些有趣的真实数据进行可视化。在本教程中，我们来看一下Google的母公司Alphabet Inc.（GOOGL）的2020年损益表。

因此，与我一起一步一步地达到我们的目标，因此，最后，您将看到如何用精美的交互式JS瀑布图来说明如何轻松地理解大量数字。

如何创建基本的JS瀑布图

一般而言，可视化JS中的任何图表都需要执行四个基本步骤：

步骤1：建立HTML网页。
步骤2：引用所有必需的JavaScript库。
步骤3：加载需要可视化的数据集。
步骤4：编写一些JS图表代码。

现在让我们按照这些步骤操作，并基于该方法构建一个很酷的JavaScript瀑布图。实际上，一切都很快。

步骤1：建立HTML网页

第一件事是制作一个HTML页面，其中可以呈现瀑布图。

<!DOCTYPE html>
<html>
  <head>
    <title>Waterfall Chart Example</title>
    <style>
      html, body, #WaterfallContainer {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="WaterfallContainer">
      // Place the waterfall chart here.
    </div>
  </body>
</html>

如上所示创建的HTML页面的<title> 标签中包含标题。样式表在中确定 <style>。可以根据自己的喜好随意定制它们。

在此<body> 部分中，有一个 <div> 元素将用作瀑布图的容器。它应该有一个id，以便我们以后可以轻松地引用它。在这种情况下，其ID设置为 WaterfallContainer。

步骤2：引用所有必需的JavaScript库

其次，我们需要连接将用于生成瀑布图的所有相关JS脚本。这些网址位于<script>该<head> 部分内的标签中。在本教程中，我选择了AnyChart的JavaScript图表库。它功能强大，灵活且易于使用，可在您的网页上迅速显示图表。

AnyChart是模块化的，这意味着当您只需要某些图表和功能时就不必加载整个库。要创建瀑布图，我们只需要核心库模块（专用于所有类型的图表）和专用的“瀑布图”模块即可。

<!DOCTYPE html>
<html>
  <head>
    <title>Waterfall Chart Example</title>
    <script src="//cdn.anychart.com/releases/8.9.0/js/anychart-core.min.js"></script>
    <script src="//cdn.anychart.com/releases/8.9.0/js/anychart-waterfall.min.js"></script>      
    <style>
      html, body, #WaterfallContainer {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <script>
      // Place the waterfall chart here.
    </script>
  </body>
</html>

步骤3：在瀑布图中加载需要可视化的数据集

因此，为了向您展示瀑布图的美丽和使命，我需要一个数据集，其中初始值受一系列中间值（正负）影响。

我决定看一下2020年Alphabet公司的年度收入表。这是我基于该瀑布图教程准备的数据集：

现在我们已经有了数据，让我们将其转换为对象数组：

var data = [
  { x: 'Total Revenue', value: 182527 },
  { x: 'Cost of Revenue', value: -84732 },
  { x: 'Gross Profit', isTotal: true },
  { x: 'Operating Expenses', value: -56571 },
  { x: 'Operating Income', isTotal: true },
  { x: 'Interest Income', value: 8583 },
  { x: 'Other Expenses', value: -1725 },
  { x: 'Income Before Taxes', isTotal: true },
  { x: 'Provision for Taxes', value: -7813 },
  { x: 'Net Income', isTotal: true }
];

如果您仔细看一下上面的代码段，则有一个名为的关键字isTotal。它用于显示总计，基本上，当您需要获取一系列加法和减法的累加值时，只需将其包括在value中即可 true。没错，您甚至不必计算任何内容，因为库可以为您即时进行计算。

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

到目前为止，一切都准备就绪，而我们实际上是向瀑布图可视化迈出的一步。仅需几行JavaScript代码，您便可以检出它，甚至可以将其集成到任何地方以进行进一步的分析。

我们之前准备的所有内容都anychart.onDocumentReady()必须放在必须放置在 HTML页面的<script> 标记中的函数内<body>。

<script>
  anychart.onDocumentReady(function() {
    // The entire JS code of the waterfall chart will be here.
  });
</script>

接下来，只需执行命令即可创建瀑布图，并按照我们在第3步中对其进行成形的方式将其馈入数据集

var chart = anychart.waterfall(data);

我们应该设置图表的主要标题吗？

chart.title('Income Statement for Alphabet Inc. (GOOGL), 2020');

最终，让我们在步骤1中设置的容器中绘制结果JS瀑布图：

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

// draw the resulting chart
chart.draw();

让我们看看下面的结果！这是一个基于JavaScript的基本交互式瀑布图，可视化Google的2020年损益表，而我们刚刚用很少的几行代码就创建了该表。

为了方便起见，下面提供了完整的代码，欢迎您在AnyChart Playground上进行检查。请继续阅读，因为定制即将来临！

<!DOCTYPE html>
<html>
  <head>
    <title>Waterfall Chart Example </title>
    <script src="//cdn.anychart.com/releases/8.9.0/js/anychart-core.min.js"></script>
    <script src="//cdn.anychart.com/releases/8.9.0/js/anychart-waterfall.min.js"></script>      
    <style>
      html, body, #WaterfallContainer {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <script>

      anychart.onDocumentReady(function () {

        // set the data
        var data = [
          { x: 'Total Revenue', value: 182527 },
          { x: 'Cost of Revenue', value: -84732 },
          { x: 'Gross Profit', isTotal: true },
          { x: 'Operating Expenses', value: -56571 },
          { x: 'Operating Income', isTotal: true },
          { x: 'Interest Income', value: 8583 },
          { x: 'Other Expenses', value: -1725 },
          { x: 'Income Before Taxes', isTotal: true },
          { x: 'Provision for Taxes', value: -7813 },
          { x: 'Net Income', isTotal: true }
        ];

        // create a waterfall chart with the data
        var chart = anychart.waterfall(data);

        // set the chart title
        chart.title('Income Statement for Alphabet Inc. (GOOGL), 2020');

        // set the container id for the waterfall chart
        chart.container('WaterfallContainer');
          
        // draw the resulting chart
        chart.draw();

      });

    </script>
  </body>
</html>

自定义JS Waterfall图表

我相信您同意我们构建的基本JS瀑布图已经看起来不错。但是总有改进的空间。

关于定制，至关重要的是，您所使用的数据可视化库必须足够灵活，以使您能够以简单的方式实现所需的内容。例如，现在我将向您展示如何通过很少的直观努力就能使瀑布图更具吸引力和艺术性。

使用轴

让我们从在值之前添加$符号开始，以使它们绝对清楚以美元表示的总和：

chart.yAxis().labels().format('${%Value}');

我们还可以为Y轴添加标题，以指定以百万为单位的数字：

chart.yAxis().title('Amount (in millions)');

X轴标签（类别名称）很长。让我们垂直放置它们。只需这样设置X轴标签旋转：

chart.xAxis().labels().rotation(-90);

看看我们有什么！（请参见AnyChart Playground上的此定制JS瀑布图。）

设置连接器的样式

现在，让我们修改瀑布图的连接器，即在各列之间绘制的线。

使用该connectorStroke()方法调整连接器的行程。可以在API Reference中找到其详细的参数说明。

chart.connectorStroke("#ff6666", 2, "2 2", "round");

查看下面的结果。（请参见AnyChart Playground上带有新设计的连接器的此定制JS瀑布图）。

使用HTML自定义瀑布列标签

在瀑布图中配置HTML格式的标签可能会很棒。要启用HTML，只需将useHtml()方法的参数设置为true。然后只需添加必要的HTML标记，它们就会起作用。

// enable HTML for the labels
chart.labels().useHtml(true);         

// customize the labels
chart.labels().format(function() {
  if (this.isTotal)
    return "<span style="color: #dd2c00; font-weight: bold;">" +
      this.absolute + "</span>";
  return this.diff;
});

根据上述配置，该chart.labels().format()方法<span>针对显示总计的列标签返回具有基于HTML的特殊格式的元素。

您会看到指示总值的列标签已用红色粗体字母设置了格式。（请参阅AnyChart Playground上带有HTML格式标签的此定制JS瀑布图。）

更改瀑布列的外观

代替使用默认的颜色，这是时候使列的外观个性化并通过提供一些华丽的颜色使它们变得优雅。

要以这种方式更改设计，我们需要一个明确定义的系列。因此，在这种情况下，我们创建一个瀑布图，然后配置一个序列，然后输入数据：

// create a waterfall chart
var chart = anychart.waterfall();

// create a series and set the data
var series = chart.waterfall(data);

瀑布图列的外观可以被配置为三个不同的状态： normal()，hovered()，和selected()。为了改变代表总数的列的外观，可以将这些方法与fill()设置填充，hatchFill()设置填充和stroke()设置笔划的方法结合使用。

采用相同的方法，我们可以调整下降和上升列的外观，如下所示。

// configure the visual settings of the total columns
series.normal().fill("#ff6666", 0.3);
series.normal().hatchFill("forward-diagonal", "#ff6666", 0.5, 10);
series.normal().stroke("#ff6666");
series.hovered().fill("#ff6666", 0.1);
series.hovered().hatchFill("forward-diagonal", "#ff6666", 0.5, 10);
series.hovered().stroke("#ff6666", 2);
series.selected().fill("#ff6666", 0.5);
series.selected().hatchFill("forward-diagonal", "#ff6666", 0.5, 10);
series.selected().stroke("#ff6666", 4);
 
// configure the visual settings of the falling columns
series.normal().fallingFill("#00cc99", 0.3);
series.normal().fallingStroke("#00cc99", 1, "10 5", "round");
series.hovered().fallingFill("#00cc99", 0.1);
series.hovered().fallingStroke("#00cc99", 2, "10 5", "round");
series.selected().fallingFill("#00cc99", 0.5);
series.selected().fallingStroke("#00cc99", 4, "10 5", "round");
 
// configure the visual settings of the rising columns
series.normal().risingFill("#0066cc", 0.3);
series.normal().risingStroke("#0066cc");
series.hovered().risingFill("#0066cc", 0.1);
series.hovered().risingStroke("#0066cc", 2);
series.selected().risingFill("#0066cc", 0.5);
series.selected().risingStroke("#0066cc", 4);

现在，瀑布图看起来像精美的柔和色彩，根据您的喜好进行更改，使最终输出更加美观！（请参阅AnyChart Playground上的此最终定制的JS瀑布图。）