瀑布图

瀑布图显示的是连续的总和,随着数值的增加或减少。 您可以使用瀑布图来了解初始值(例如,净收入)如何受到一系列正负值的影响。

SpreadJS 支持瀑布图. 使用GC.Spread.Sheets.Charts.ChartType.waterfall属性来获得图表类型. Waterfall图表显示的是连续的总和,随着数值的增加或减少。它们有助于了解初始值(例如,净收入)如何受到一系列正负值的影响。 您可以将瀑布图添加到SpreadJS中,并使用图表API更改其样式:
window.onload = function () { let spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 2 }); initSpread(spread); }; function initSpread(spread) { let sheets = spread.sheets; spread.suspendPaint(); spread.fromJSON(data); let customWaterfallChart = sheets[0].charts.add("customWaterfallChart", GC.Spread.Sheets.Charts.ChartType.waterfall, 400, 0, 700, 450, "B2:C15"); let baseWaterfallChart = sheets[1].charts.add("baseWaterfallChart", GC.Spread.Sheets.Charts.ChartType.waterfall, 400, 0, 700, 450, "B2:C15"); setCustomStyle(customWaterfallChart); setBaseStyle(baseWaterfallChart); spread.resumePaint(); } function setCustomStyle(chart) { let chartArea = chart.chartArea(); chartArea.fontSize = 14; chart.chartArea(chartArea); let dataLabels = chart.dataLabels(); dataLabels.showValue = true; dataLabels.color = 'rgb(64,60,61)'; dataLabels.position = GC.Spread.Sheets.Charts.DataLabelPosition.center; chart.dataLabels(dataLabels); let legend = chart.legend(); legend.position = GC.Spread.Sheets.Charts.LegendPosition.bottom; chart.legend(legend) let title = chart.title(); title.text = "Monthly Income"; title.fontSize = 16; chart.title(title); let series = chart.series().get(0); series.showConnectorLines = true; series.gapWidth = 0.2; series.subtotals = [0, 13]; chart.series().set(0, series); chart.formatOvers({ 0: { backColor: "rgb(61,198,147)", }, 1: { backColor: "rgb(225,128,99)", }, 2: { backColor: "rgb(91,188,214)", } }); } function setBaseStyle(chart) { let title = chart.title(); title.text = "Monthly Income"; title.fontSize = 16; chart.title(title); let series = chart.series().get(0); series.showConnectorLines = true; series.subtotals = [13]; chart.series().set(0, series); }
<!doctype html> <html style="height:100%;font-size:14px;"> <head> <meta charset="utf-8" /> <meta name="spreadjs culture" content="zh-cn" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-shapes/dist/gc.spread.sheets.shapes.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-charts/dist/gc.spread.sheets.charts.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-resources-zh/dist/gc.spread.sheets.resources.zh.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/data/waterfallData.js" type="text/javascript"></script> <script src="app.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <div class="sample-tutorial"> <div id="ss" class="sample-tutorial"></div> </div> </body> </html>
.sample-tutorial { position: relative; height: 100%; overflow: hidden; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }