成人影院在线入口,成人伦理,成人理伦A级A片

圖表控件AnyChart如何使用JavaScript創建瀑布圖

翻譯|使用教程|編輯：楊鵬連|2021-03-22 10:08:19.227|閱讀 334 次

概述：您是否想知道如何使用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="http://cdn.anychart.com/releases/8.9.0/js/anychart-core.min.js"></script>
    <script src="http://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="http://cdn.anychart.com/releases/8.9.0/js/anychart-core.min.js"></script>
    <script src="http://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瀑布圖。）