AnyGantt是基于JavaScript的高級(jí)解決方案，用于構(gòu)建復(fù)雜且信息豐富的甘特圖。它完全跨瀏覽器和跨平臺(tái)，可用于ASP.NET、ASP、PHP、JSP、ColdFusion、Ruby on Rails或簡(jiǎn)單的HTML頁(yè)面。
點(diǎn)擊下載AnyGantt正式版
瀑布圖是一種數(shù)據(jù)可視化，顯示了一系列中間正或負(fù)中間值如何影響初始值。此類(lèi)又稱(chēng)為級(jí)聯(lián)圖，橋梁圖，飛磚圖或Mario圖。
通常，中間值可視化為浮動(dòng)列，而初始值和最終值看起來(lái)像整個(gè)列。元素通常用線連接。
本文介紹了如何創(chuàng)建基本的瀑布圖以及配置特定于該類(lèi)型的設(shè)置。您還可以查看下表以簡(jiǎn)要了解瀑布圖的特征：
模組
Waterfall圖表需要添加Core和Waterfall模塊：
<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>
快速開(kāi)始
要?jiǎng)?chuàng)建瀑布圖，請(qǐng)使用anychart.waterfall（） 圖表構(gòu)造函數(shù)。如果將數(shù)據(jù)傳遞給此圖表構(gòu)造函數(shù)，它將創(chuàng)建一個(gè)Waterfall系列。
要顯式創(chuàng)建Waterfall系列，請(qǐng)調(diào)用Waterfall （）方法。
下面的示例演示如何創(chuàng)建基本的瀑布圖：
// create data
var data = [
{x: "Start", value: 23},
{x: "Jan", value: 22},
{x: "Feb", value: -46},
{x: "Mar", value: -91},
{x: "Apr", value: 37},
{x: "May", value: -21},
{x: "Jun", value: 53},
{x: "Jul", value: 31},
{x: "Aug", value: -15},
{x: "Sep", value: 42},
{x: "Oct", value: 53},
{x: "Nov", value: -15},
{x: "Dec", value: 51},
{x: "End", isTotal: true}
];
// create a waterfall chart
chart = anychart.waterfall();
// create a series and set the data
var series = chart.waterfall(data);
// set the container id
chart.container("container");
// initiate drawing the chart
chart.draw();
通用設(shè)置
在AnyChart中，為所有圖表類(lèi)型（包括瀑布圖）以相同的方式配置了許多設(shè)置（例如，圖例和交互設(shè)置）。
特殊設(shè)定
數(shù)據(jù)
瀑布圖的數(shù)據(jù)可以傳遞到圖表構(gòu)造函數(shù)anychart.waterfall（）或data（）方法。
使用以下數(shù)據(jù)字段：
-
x 設(shè)置類(lèi)別
-
value 設(shè)定值
-
isTotal 顯示總價(jià)值
注意：可以向數(shù)據(jù)添加自定義字段-請(qǐng)參見(jiàn)本文的“標(biāo)簽和工具提示”部分。
該isTotal字段是布爾值，可選地用于顯示/隱藏總值。默認(rèn)情況下，如果未指定總值，則該值將顯示在一個(gè)點(diǎn)中；如果指定了該值，則該總值將不顯示。
value可以根據(jù)數(shù)據(jù)模式以不同的方式解釋該字段，該數(shù)據(jù)模式是通過(guò)使用dataMode（）方法（以"diff"或"absolute"作為參數(shù)）來(lái)設(shè)置的-請(qǐng)參見(jiàn)anychart.enums.WaterfallDataMode。
默認(rèn)的數(shù)據(jù)模式是difference。這意味著value數(shù)據(jù)字段被解釋為當(dāng)前點(diǎn)和上一個(gè)點(diǎn)之間的差，絕對(duì)值是自動(dòng)計(jì)算的。
在絕對(duì)數(shù)據(jù)模式下，該value字段將解釋為點(diǎn)的絕對(duì)值，并且會(huì)自動(dòng)計(jì)算差值。
下面的示例顯示了如何設(shè)置數(shù)據(jù)模式：
// create data
var data = [
{x: "Start", value: 23},
{x: "Jan", value: 22},
{x: "Feb", value: -46},
{x: "Mar", value: -91},
{x: "Apr", value: 37},
{x: "May", value: -21},
{x: "Jun", value: 53},
{x: "Jul", value: 31},
{x: "Aug", value: -15},
{x: "Sep", value: 42},
{x: "Oct", value: 53},
{x: "Nov", value: -15},
{x: "Dec", value: 51},
{x: "End", isTotal: true}
];
// create and configure the first waterfall chart
var chart1 = anychart.waterfall(data);
// set the data mode
chart1.dataMode("diff");
// create and configure the second waterfall chart
var chart2 = anychart.waterfall(data);
// set the data mode
chart2.dataMode("absolute");
多個(gè)系列
瀑布圖支持多個(gè)系列，此示例顯示了它們的可視化方式：
// create a data set
var data = anychart.data.set([
["Start", 23, 30, 21],
["Jan", 22, 22, 54],
["Feb", -46, 45, -32],
["Mar", -91, -30, -28],
["Apr", 37, -27, 36],
["May", -24, 62, -48],
["Jun", 55, 40, -29],
["Jul", 31, 33, 41],
["Aug", -25, -46, 36],
["Sep", 42, 23, 22],
["Oct", 67, -44, -40],
["Nov", -24, -31, 37],
["Dec", 51, 28, 25],
["End", {isTotal: true}, {isTotal: true}, {isTotal: true}],
]);
// map the data
var seriesData_1 = data.mapAs({x: 0, value: 1});
var seriesData_2 = data.mapAs({x: 0, value: 2});
var seriesData_3 = data.mapAs({x: 0, value: 3});
// create a waterfall chart
chart = anychart.waterfall();
// create the first series and set the data
var series1 = chart.waterfall(seriesData_1);
// create the second series and set the data
var series2 = chart.waterfall(seriesData_2);
// create the third series and set the data
var series3 = chart.waterfall(seriesData_3);
出現(xiàn)
列
Waterfall列的外觀設(shè)置可以配置為三種狀態(tài)：正常，懸停和選中。使用normal（），hovered（）和selected（）方法。
將它們與以下方法結(jié)合以調(diào)整指示總值的列：
-
fill（）設(shè)置填充
-
hatchFill（）設(shè)置填充圖案
-
stroke（）設(shè)置筆劃
要調(diào)整下降列，請(qǐng)使用：
-
FallingFill（）
-
fallingHatchFill（）
-
fallingStroke（）
要調(diào)整上升列，請(qǐng)使用：
-
risingFill（）
-
riseHatchFill（）
-
riseStroke（）
另外，您可以使用anychart.core.StateSettings中的其他方法。
在以下示例中，有一個(gè)配置了外觀設(shè)置的瀑布圖：
// configure the visual settings of the series
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);
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");
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);
連接器
連接器是連接瀑布圖的兩列的線。要配置連接器的筆劃，請(qǐng)使用connectorStroke（）方法：
// configure connectors
chart.connectorStroke("#ff6666", 2, "2 2", "round");
點(diǎn)大小
此圖表類(lèi)型允許您設(shè)置其點(diǎn)的大小。在Point Size文章中閱讀更多內(nèi)容。
標(biāo)簽和工具提示
標(biāo)簽是可以放置在任何圖表上任何位置的文本或圖像元素（可以在整個(gè)系列或單個(gè)點(diǎn)上啟用它們）。對(duì)于文本標(biāo)簽，可以使用字體設(shè)置和文本格式器。
甲工具提示是文本時(shí)的曲線圖上的點(diǎn)懸停在顯示框。有許多可視設(shè)置和其他設(shè)置：例如，您可以使用字體設(shè)置和文本格式設(shè)置器來(lái)編輯文本，更改背景樣式，調(diào)整工具提示的位置等等。
代幣
要更改標(biāo)簽的文本，請(qǐng)將labels（）和format（）方法與tokens結(jié)合使用。
要配置工具提示，請(qǐng)對(duì)tooltip（）和format（）方法執(zhí)行相同的操作。也可以更改工具提示的標(biāo)題：使用titleFormat（）。
除了適用于所有圖表類(lèi)型的標(biāo)記外，還有兩個(gè)特定于Waterfall的標(biāo)記：{%diff}和{%absolute}。第一個(gè)返回點(diǎn)之間的差，第二個(gè)返回點(diǎn)的絕對(duì)值。
另外，您可以向數(shù)據(jù)添加自定義字段，并使用與其對(duì)應(yīng)的自定義標(biāo)記。
默認(rèn)情況下，標(biāo)簽顯示差異，在以下示例中，{%absolute}標(biāo)記用于顯示絕對(duì)值。工具提示的文本（包括標(biāo)題）也被修改，并使用自定義標(biāo)記：
// create data
var data = [
{x: "Start", value: 23, custom_field: "info 1"},
{x: "Jan", value: 22, custom_field: "info 2"},
{x: "Feb", value: -46, custom_field: "info 3"},
{x: "Mar", value: -91, custom_field: "info 4"},
{x: "Apr", value: 37, custom_field: "info 5"},
{x: "May", value: -21, custom_field: "info 6"},
{x: "Jun", value: 53, custom_field: "info 7"},
{x: "Jul", value: 31, custom_field: "info 8"},
{x: "Aug", value: -15, custom_field: "info 9"},
{x: "Sep", value: 42, custom_field: "info 10"},
{x: "Oct", value: 53, custom_field: "info 11"},
{x: "Nov", value: -15, custom_field: "info 12"},
{x: "Dec", value: 51, custom_field: "info 13"},
{x: "End", isTotal: true, custom_field: "info 14"}
];
// create a waterfall chart
var chart = anychart.waterfall();
// create a series and set the data
var series = chart.waterfall(data);
// configure labels
chart.labels().format("{%absolute}");
// configure tooltips
chart.tooltip().titleFormat("Absolute | Difference");
chart.tooltip().format("{%absolute}\n{%diff}\n\n{%custom_field}");
格式化功能
要配置標(biāo)簽和工具提示，可以使用格式設(shè)置功能和以下字段（默認(rèn)字段除外）：
該isTotal字段允許找出一列是否表示總價(jià)值與否。
您還可以將自定義字段添加到數(shù)據(jù)中，并使用getData（）方法對(duì)其進(jìn)行引用。
在下面的示例中，所有標(biāo)簽均顯示絕對(duì)值，并且指示總值的列標(biāo)簽帶有顏色。指示總值的列的工具提示也被修改，并使用自定義字段：
// create data
var data = [
{x: "Start", value: 23, custom_field: "info 1"},
{x: "Jan", value: 22, custom_field: "info 2"},
{x: "Feb", value: -46, custom_field: "info 3"},
{x: "Mar", value: -91, custom_field: "info 4"},
{x: "Apr", value: 37, custom_field: "info 5"},
{x: "May", value: -21, custom_field: "info 6"},
{x: "Jun", value: 53, custom_field: "info 7"},
{x: "Jul", value: 31, custom_field: "info 8"},
{x: "Aug", value: -15, custom_field: "info 9"},
{x: "Sep", value: 42, custom_field: "info 10"},
{x: "Oct", value: 53, custom_field: "info 11"},
{x: "Nov", value: -15, custom_field: "info 12"},
{x: "Dec", value: 51, custom_field: "info 13"},
{x: "End", isTotal: true, custom_field: "info 14"}
];
// create a waterfall chart
var chart = anychart.waterfall();
// create a series and set the data
var series = chart.waterfall(data);
// enable HTML for labels
chart.labels().useHtml(true);
// configure labels
chart.labels().format(function() {
if (this.isTotal)
return "" +
this.absolute + "";
return this.absolute;
});
// configure tooltips
chart.tooltip().titleFormat(function() {
if (this.isTotal)
return "TOTAL (" + this.getData("custom_field") + ")";
return this.x + " (" + this.getData("custom_field") + ")";
});
瀑布圖的默認(rèn)圖例顯示增加，減少和總計(jì)列。如果要使用多系列圖表，而要顯示系列，則可以通過(guò)將legend（）方法與itemsSourceMode（）結(jié)合使用來(lái)更改圖例項(xiàng)目的來(lái)源，并用作參數(shù)："default"
// add hatch fills
series1.hatchFill("percent05", "white", 1, 9);
series1.fallingHatchFill("percent05", "white", 1, 9);
series1.risingHatchFill("percent05", "white", 1, 9);
series2.hatchFill("dashed-backward-diagonal", "white", 1, 9);
series2.fallingHatchFill("dashed-backward-diagonal", "white", 1, 9);
series2.risingHatchFill("dashed-backward-diagonal", "white", 1, 9);
series3.hatchFill("forward-diagonal", "white", 1, 6);
series3.fallingHatchFill("forward-diagonal", "white", 1, 6);
series3.risingHatchFill("forward-diagonal", "white", 1, 6);
// configure the legend
chart.legend().itemsSourceMode("default");
對(duì)本教程感興趣的朋友可以下載AnyGantt試用版免費(fèi)體驗(yàn)哦~更多產(chǎn)品信息請(qǐng)咨詢(xún)
APS是慧都科技15年行業(yè)經(jīng)驗(yàn)以及技術(shù)沉淀之作，通過(guò)連接企業(yè)接單、采購(gòu)、制造、倉(cāng)儲(chǔ)物流等整個(gè)供應(yīng)鏈流程，幫助提升企業(yè)生產(chǎn)效率。
想要購(gòu)買(mǎi)AnyGantt正版授權(quán)或慧都APS系統(tǒng)，或了解更多產(chǎn)品信息請(qǐng)點(diǎn)擊
標(biāo)簽：
本站文章除注明轉(zhuǎn)載外，均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載，但請(qǐng)務(wù)必注明出處、不得修改原文相關(guān)鏈接，如果存在內(nèi)容上的異議請(qǐng)郵件反饋至chenjj@fc6vip.cn
文章轉(zhuǎn)載自：
金喜正規(guī)買(mǎi)球 
28次
相關(guān)產(chǎn)品
正式授權(quán)
最新文章 
金喜正規(guī)買(mǎi)球相關(guān)的文章 
微信
在線咨詢(xún)
渝公網(wǎng)安備
50010702500608號(hào)
客服熱線