AnyChart是基于JavaScript (HTML5) 的圖表控件。使用AnyChart控件，可創建跨瀏覽器和跨平臺的交互式圖表和儀表。AnyChart 圖表目前已被很多知名大公司所使用，可用于儀表盤、報表、數據分析、統計學、金融等領域。
點擊下載AnyChart正式版
您是否想知道如何使用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瀑布圖。）
那么，瀑布圖能告訴我們什么？上面的圖表顯示了Alphabet的1,825億美元總收入如何變成近403億美元的凈收入，代表了2020年12個月的主要收入和支出流量。隨意探索和分析！
結論
與其閱讀和瀏覽原始數據，不如使用一個涼爽的瀑布圖并毫不費力地獲取有價值的觀察結果，是個更好的主意嗎？
您還可以可視化多個系列。瀏覽瀑布圖文檔， 并深入研究其他可以完成的方式以及如何完成。
借助瀑布圖和其他應用程序中的JavaScript進行交互式數據可視化，祝您好運。
相關產品推薦：
AnyGantt-構建復雜且內容豐富的甘特圖的理想工具
AnyMap-可交互式地圖是AnyChart組件
AnyStock-基于XML/JSON的Flash金融圖表解決方案
APS幫助提升企業生產效率，真正實現生產排程可視化呈現與控制,快速有效響應不同場景的生產計劃，提高準時交貨能力，提高產能和資源利用率
想要購買AnyChart正版授權，或了解更多產品信息請點擊
標簽：
本站文章除注明轉載外，均為本站原創或翻譯。歡迎任何形式的轉載，但請務必注明出處、不得修改原文相關鏈接，如果存在內容上的異議請郵件反饋至chenjj@fc6vip.cn
文章轉載自：
金喜正規買球 
20次
相關產品
正式授權
最新文章 
金喜正規買球相關的文章 
微信
在線咨詢
渝公網安備
50010702500608號
客服熱線