AnyChart是基于JavaScript (HTML5) 的圖表控件。使用AnyChart控件，可創(chuàng)建跨瀏覽器和跨平臺(tái)的交互式圖表和儀表。AnyChart 圖表目前已被很多知名大公司所使用，可用于儀表盤、報(bào)表、數(shù)據(jù)分析、統(tǒng)計(jì)學(xué)、金融等領(lǐng)域。
點(diǎn)擊下載AnyChart正式版
您是否想知道如何使用JavaScript輕松地將瀑布圖添加到網(wǎng)頁(yè)或應(yīng)用程序？本教程將確保您準(zhǔn)備好自信地應(yīng)對(duì)這種交互式數(shù)據(jù)可視化開發(fā)！
瀑布圖 說明了在一系列中間加法（正值）和減法（負(fù)值）之間，起始值如何變?yōu)樽罱K值。這些加法和減法可以是基于時(shí)間的，也可以表示諸如多種收入來源和支出之類的類別。在金融領(lǐng)域，瀑布圖通常被稱為橋梁。您可能還聽說過它稱為級(jí)聯(lián)，馬里奧或飛磚圖。
要查看實(shí)際中的瀑布圖并學(xué)習(xí)如何使用JavaScript（HTML5）構(gòu)建瀑布圖，我們需要一些有趣的真實(shí)數(shù)據(jù)進(jìn)行可視化。在本教程中，我們來看一下Google的母公司Alphabet Inc.（GOOGL）的2020年損益表。
因此，與我一起一步一步地達(dá)到我們的目標(biāo)，因此，最后，您將看到如何用精美的交互式JS瀑布圖來說明如何輕松地理解大量數(shù)字。
如何創(chuàng)建基本的JS瀑布圖
一般而言，可視化JS中的任何圖表都需要執(zhí)行四個(gè)基本步驟：
步驟1：建立HTML網(wǎng)頁(yè)。
步驟2：引用所有必需的JavaScript庫(kù)。
步驟3：加載需要可視化的數(shù)據(jù)集。
步驟4：編寫一些JS圖表代碼。
現(xiàn)在讓我們按照這些步驟操作，并基于該方法構(gòu)建一個(gè)很酷的JavaScript瀑布圖。實(shí)際上，一切都很快。
步驟1：建立HTML網(wǎng)頁(yè)
第一件事是制作一個(gè)HTML頁(yè)面，其中可以呈現(xiàn)瀑布圖。
<!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>
如上所示創(chuàng)建的HTML頁(yè)面的<title> 標(biāo)簽中包含標(biāo)題。樣式表在中確定 <style>。可以根據(jù)自己的喜好隨意定制它們。
在此<body> 部分中，有一個(gè) <div> 元素將用作瀑布圖的容器。它應(yīng)該有一個(gè)id，以便我們以后可以輕松地引用它。在這種情況下，其ID設(shè)置為 WaterfallContainer。
步驟2：引用所有必需的JavaScript庫(kù)
其次，我們需要連接將用于生成瀑布圖的所有相關(guān)JS腳本。這些網(wǎng)址位于<script>該<head> 部分內(nèi)的標(biāo)簽中 。在本教程中，我選擇了AnyChart的JavaScript圖表庫(kù)。它功能強(qiáng)大，靈活且易于使用，可在您的網(wǎng)頁(yè)上迅速顯示圖表。
AnyChart是模塊化的，這意味著當(dāng)您只需要某些圖表和功能時(shí)就不必加載整個(gè)庫(kù)。要?jiǎng)?chuàng)建瀑布圖，我們只需要核心庫(kù)模塊（專用于所有類型的圖表）和專用的“瀑布圖”模塊即可。
<!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：在瀑布圖中加載需要可視化的數(shù)據(jù)集
因此，為了向您展示瀑布圖的美麗和使命，我需要一個(gè)數(shù)據(jù)集，其中初始值受一系列中間值（正負(fù)）影響。
我決定看一下2020年Alphabet公司的年度收入表。這是我基于該瀑布圖教程準(zhǔn)備的數(shù)據(jù)集：
現(xiàn)在我們已經(jīng)有了數(shù)據(jù)，讓我們將其轉(zhuǎn)換為對(duì)象數(shù)組：
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 }
];
如果您仔細(xì)看一下上面的代碼段，則有一個(gè)名為的關(guān)鍵字isTotal。它用于顯示總計(jì)，基本上，當(dāng)您需要獲取一系列加法和減法的累加值時(shí)，只需將其包括在value中即可 true。沒錯(cuò)，您甚至不必計(jì)算任何內(nèi)容，因?yàn)閹?kù)可以為您即時(shí)進(jìn)行計(jì)算。
步驟4：編寫JS Waterfall圖表代碼
到目前為止，一切都準(zhǔn)備就緒，而我們實(shí)際上是向瀑布圖可視化邁出的一步。僅需幾行JavaScript代碼，您便可以檢出它，甚至可以將其集成到任何地方以進(jìn)行進(jìn)一步的分析。
我們之前準(zhǔn)備的所有內(nèi)容都anychart.onDocumentReady()必須放在必須放置在 HTML頁(yè)面的<script> 標(biāo)記中的函數(shù)內(nèi)<body>。
<script>
anychart.onDocumentReady(function() {
// The entire JS code of the waterfall chart will be here.
});
</script>
接下來，只需執(zhí)行命令即可創(chuàng)建瀑布圖，并按照我們?cè)诘?步中對(duì)其進(jìn)行成形的方式將其饋入數(shù)據(jù)集
var chart = anychart.waterfall(data);
我們應(yīng)該設(shè)置圖表的主要標(biāo)題嗎？
chart.title('Income Statement for Alphabet Inc. (GOOGL), 2020');
最終，讓我們?cè)诓襟E1中設(shè)置的容器中繪制結(jié)果JS瀑布圖：
// set the container id for the waterfall chart
chart.container('WaterfallContainer');
// draw the resulting chart
chart.draw();
讓我們看看下面的結(jié)果！這是一個(gè)基于JavaScript的基本交互式瀑布圖，可視化Google的2020年損益表，而我們剛剛用很少的幾行代碼就創(chuàng)建了該表。
為了方便起見，下面提供了完整的代碼，歡迎您在AnyChart Playground上進(jìn)行檢查。請(qǐng)繼續(xù)閱讀，因?yàn)槎ㄖ萍磳砼R！
<!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圖表
我相信您同意我們構(gòu)建的基本JS瀑布圖已經(jīng)看起來不錯(cuò)。但是總有改進(jìn)的空間。
關(guān)于定制，至關(guān)重要的是，您所使用的數(shù)據(jù)可視化庫(kù)必須足夠靈活，以使您能夠以簡(jiǎn)單的方式實(shí)現(xiàn)所需的內(nèi)容。例如，現(xiàn)在我將向您展示如何通過很少的直觀努力就能使瀑布圖更具吸引力和藝術(shù)性。
使用軸
讓我們從在值之前添加$符號(hào)開始，以使它們絕對(duì)清楚以美元表示的總和：
chart.yAxis().labels().format('${%Value}');
我們還可以為Y軸添加標(biāo)題，以指定以百萬(wàn)為單位的數(shù)字：
chart.yAxis().title('Amount (in millions)');
X軸標(biāo)簽（類別名稱）很長(zhǎng)。讓我們垂直放置它們。只需這樣設(shè)置X軸標(biāo)簽旋轉(zhuǎn)：
chart.xAxis().labels().rotation(-90);
看看我們有什么！（請(qǐng)參見AnyChart Playground上的此定制JS瀑布圖 。）
設(shè)置連接器的樣式
現(xiàn)在，讓我們修改瀑布圖的連接器，即在各列之間繪制的線。
使用該connectorStroke()方法調(diào)整連接器的行程。可以在API Reference中找到其詳細(xì)的參數(shù)說明。
chart.connectorStroke("#ff6666", 2, "2 2", "round");
查看下面的結(jié)果。（請(qǐng)參見AnyChart Playground上帶有新設(shè)計(jì)的連接器的此定制JS瀑布圖）。
使用HTML自定義瀑布列標(biāo)簽
在瀑布圖中配置HTML格式的標(biāo)簽可能會(huì)很棒。要啟用HTML，只需將useHtml()方法的參數(shù)設(shè)置為true。然后只需添加必要的HTML標(biāo)記，它們就會(huì)起作用。
// 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;
});
根據(jù)上述配置，該chart.labels().format()方法<span>針對(duì)顯示總計(jì)的列標(biāo)簽返回具有基于HTML的特殊格式的元素。
您會(huì)看到指示總值的列標(biāo)簽已用紅色粗體字母設(shè)置了格式。（請(qǐng)參閱AnyChart Playground上帶有HTML格式標(biāo)簽的此定制JS瀑布圖。）
更改瀑布列的外觀
代替使用默認(rèn)的顏色，這是時(shí)候使列的外觀個(gè)性化并通過提供一些華麗的顏色使它們變得優(yōu)雅。
要以這種方式更改設(shè)計(jì)，我們需要一個(gè)明確定義的系列。因此，在這種情況下，我們創(chuàng)建一個(gè)瀑布圖，然后配置一個(gè)序列，然后輸入數(shù)據(jù)：
// create a waterfall chart
var chart = anychart.waterfall();
// create a series and set the data
var series = chart.waterfall(data);
瀑布圖列的外觀可以被配置為三個(gè)不同的狀態(tài)： normal()，hovered()，和selected()。為了改變代表總數(shù)的列的外觀，可以將這些方法與fill()設(shè)置填充，hatchFill()設(shè)置填充和stroke()設(shè)置筆劃的方法結(jié)合使用 。
采用相同的方法，我們可以調(diào)整下降和上升列的外觀，如下所示。
// 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);
現(xiàn)在，瀑布圖看起來像精美的柔和色彩，根據(jù)您的喜好進(jìn)行更改，使最終輸出更加美觀！（請(qǐng)參閱AnyChart Playground上的此最終定制的JS瀑布圖。）
那么，瀑布圖能告訴我們什么？上面的圖表顯示了Alphabet的1,825億美元總收入如何變成近403億美元的凈收入，代表了2020年12個(gè)月的主要收入和支出流量。隨意探索和分析！
結(jié)論
與其閱讀和瀏覽原始數(shù)據(jù)，不如使用一個(gè)涼爽的瀑布圖并毫不費(fèi)力地獲取有價(jià)值的觀察結(jié)果，是個(gè)更好的主意嗎？
您還可以可視化多個(gè)系列。瀏覽瀑布圖文檔， 并深入研究其他可以完成的方式以及如何完成。
借助瀑布圖和其他應(yīng)用程序中的JavaScript進(jìn)行交互式數(shù)據(jù)可視化，祝您好運(yùn)。
相關(guān)產(chǎn)品推薦：
AnyGantt-構(gòu)建復(fù)雜且內(nèi)容豐富的甘特圖的理想工具
AnyMap-可交互式地圖是AnyChart組件
AnyStock-基于XML/JSON的Flash金融圖表解決方案
APS幫助提升企業(yè)生產(chǎn)效率，真正實(shí)現(xiàn)生產(chǎn)排程可視化呈現(xiàn)與控制,快速有效響應(yīng)不同場(chǎng)景的生產(chǎn)計(jì)劃，提高準(zhǔn)時(shí)交貨能力，提高產(chǎn)能和資源利用率
想要購(gòu)買AnyChart正版授權(quán)，或了解更多產(chǎn)品信息請(qǐng)點(diǎn)擊
標(biāo)簽：
本站文章除注明轉(zhuǎn)載外，均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載，但請(qǐng)務(wù)必注明出處、不得修改原文相關(guān)鏈接，如果存在內(nèi)容上的異議請(qǐng)郵件反饋至chenjj@ke049m.cn
文章轉(zhuǎn)載自：
半島外圍網(wǎng)上直營(yíng) 
11次
相關(guān)產(chǎn)品
正式授權(quán)
最新文章 
半島外圍網(wǎng)上直營(yíng)相關(guān)的文章 
微信
在線咨詢
渝公網(wǎng)安備
50010702500608號(hào)
客服熱線