AnyGantt是基于JavaScript的高級解決方案，用于構建復雜且信息豐富的甘特圖。它完全跨瀏覽器和跨平臺，可用于ASP.NET、ASP、PHP、JSP、ColdFusion、Ruby on Rails或簡單的HTML頁面。
點擊下載AnyGantt正式版
瀑布圖是一種數據可視化，顯示了一系列中間正或負中間值如何影響初始值。此類又稱為級聯圖，橋梁圖，飛磚圖或Mario圖。
通常，中間值可視化為浮動列，而初始值和最終值看起來像整個列。元素通常用線連接。
本文介紹了如何創建基本的瀑布圖以及配置特定于該類型的設置。您還可以查看下表以簡要了解瀑布圖的特征：
模組
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>
快速開始
要創建瀑布圖，請使用anychart.waterfall（） 圖表構造函數。如果將數據傳遞給此圖表構造函數，它將創建一個Waterfall系列。
要顯式創建Waterfall系列，請調用Waterfall （）方法。
下面的示例演示如何創建基本的瀑布圖：
// 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();
通用設置
在AnyChart中，為所有圖表類型（包括瀑布圖）以相同的方式配置了許多設置（例如，圖例和交互設置）。
特殊設定
數據
瀑布圖的數據可以傳遞到圖表構造函數anychart.waterfall（）或data（）方法。
使用以下數據字段：
-
x 設置類別
-
value 設定值
-
isTotal 顯示總價值
注意：可以向數據添加自定義字段-請參見本文的“標簽和工具提示”部分。
該isTotal字段是布爾值，可選地用于顯示/隱藏總值。默認情況下，如果未指定總值，則該值將顯示在一個點中；如果指定了該值，則該總值將不顯示。
value可以根據數據模式以不同的方式解釋該字段，該數據模式是通過使用dataMode（）方法（以"diff"或"absolute"作為參數）來設置的-請參見anychart.enums.WaterfallDataMode。
默認的數據模式是difference。這意味著value數據字段被解釋為當前點和上一個點之間的差，絕對值是自動計算的。
在絕對數據模式下，該value字段將解釋為點的絕對值，并且會自動計算差值。
下面的示例顯示了如何設置數據模式：
// 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");
多個系列
瀑布圖支持多個系列，此示例顯示了它們的可視化方式：
// 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);
出現
列
Waterfall列的外觀設置可以配置為三種狀態：正常，懸停和選中。使用normal（），hovered（）和selected（）方法。
將它們與以下方法結合以調整指示總值的列：
-
fill（）設置填充
-
hatchFill（）設置填充圖案
-
stroke（）設置筆劃
要調整下降列，請使用：
-
FallingFill（）
-
fallingHatchFill（）
-
fallingStroke（）
要調整上升列，請使用：
-
risingFill（）
-
riseHatchFill（）
-
riseStroke（）
另外，您可以使用anychart.core.StateSettings中的其他方法。
在以下示例中，有一個配置了外觀設置的瀑布圖：
// 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);
連接器
連接器是連接瀑布圖的兩列的線。要配置連接器的筆劃，請使用connectorStroke（）方法：
// configure connectors
chart.connectorStroke("#ff6666", 2, "2 2", "round");
點大小
此圖表類型允許您設置其點的大小。在Point Size文章中閱讀更多內容。
標簽和工具提示
標簽是可以放置在任何圖表上任何位置的文本或圖像元素（可以在整個系列或單個點上啟用它們）。對于文本標簽，可以使用字體設置和文本格式器。
甲工具提示是文本時的曲線圖上的點懸停在顯示框。有許多可視設置和其他設置：例如，您可以使用字體設置和文本格式設置器來編輯文本，更改背景樣式，調整工具提示的位置等等。
代幣
要更改標簽的文本，請將labels（）和format（）方法與tokens結合使用。
要配置工具提示，請對tooltip（）和format（）方法執行相同的操作。也可以更改工具提示的標題：使用titleFormat（）。
除了適用于所有圖表類型的標記外，還有兩個特定于Waterfall的標記：{%diff}和{%absolute}。第一個返回點之間的差，第二個返回點的絕對值。
另外，您可以向數據添加自定義字段，并使用與其對應的自定義標記。
默認情況下，標簽顯示差異，在以下示例中，{%absolute}標記用于顯示絕對值。工具提示的文本（包括標題）也被修改，并使用自定義標記：
// 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}");
格式化功能
要配置標簽和工具提示，可以使用格式設置功能和以下字段（默認字段除外）：
該isTotal字段允許找出一列是否表示總價值與否。
您還可以將自定義字段添加到數據中，并使用getData（）方法對其進行引用。
在下面的示例中，所有標簽均顯示絕對值，并且指示總值的列標簽帶有顏色。指示總值的列的工具提示也被修改，并使用自定義字段：
// 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") + ")";
});
瀑布圖的默認圖例顯示增加，減少和總計列。如果要使用多系列圖表，而要顯示系列，則可以通過將legend（）方法與itemsSourceMode（）結合使用來更改圖例項目的來源，并用作參數："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");
對本教程感興趣的朋友可以下載AnyGantt試用版免費體驗哦~更多產品信息請咨詢
APS是慧都科技15年行業經驗以及技術沉淀之作，通過連接企業接單、采購、制造、倉儲物流等整個供應鏈流程，幫助提升企業生產效率。
想要購買AnyGantt正版授權或慧都APS系統，或了解更多產品信息請點擊
標簽：
本站文章除注明轉載外，均為本站原創或翻譯。歡迎任何形式的轉載，但請務必注明出處、不得修改原文相關鏈接，如果存在內容上的異議請郵件反饋至chenjj@ke049m.cn
文章轉載自：
半島外圍網上直營 
15次
相關產品
正式授權
最新文章 
半島外圍網上直營相關的文章 
微信
在線咨詢
渝公網安備
50010702500608號
客服熱線