柱形图

在数据分析领域,柱形图是最为常见也是应用最为广泛的。在worksheet中以行或者列来组织的数据,可以非常好的用柱形图来绘制和表示。

SpreadJS 支持簇状柱形图,堆积柱形图和百分比堆积柱形图。通过 GC.Spread.Sheets.Charts.ChartType.columnClustered 来指定chartType为簇状柱形图。 下方代码展示了如何插入一个 ColumnClustered (簇状柱形图)类型的chart, 你可以通过chart的api来更改chart的样式。 柱形图也可以是堆积柱形图或者百分比堆积柱形图。使用 GC.Spread.Sheets.Charts.ChartType.columnStacked , GC.Spread.Sheets.Charts.ChartType.columnStacked100 来指定这两种柱形图 ColumnStacked 图表类型会将系列以任意方式堆积在一起。 ColumnStacked100% 图表类型会将系列以百分比的方式堆积在一起。
window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {sheetCount: 3}); initSpread(spread); }; var colorArray = ['rgb(120, 180, 240)', 'rgb(240, 160, 80)', 'rgb(140, 240, 120)', 'rgb(120, 150, 190)']; function initSpread(spread) { var chartType = [{ type: GC.Spread.Sheets.Charts.ChartType.columnClustered, desc: "columnClustered", dataArray: [ ["", 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], ["Tokyo", 49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4], ["New York", 83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3], ["London", 48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2], ["Berlin", 42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1] ], dataFormula: "A1:M5", changeStyle: function (chart) { changeChartTitle(chart, "The Average Monthly Rainfall"); changColumnChartDataLabels(chart); chart.axes({primaryValue: {title: {text: "Rainfall(mm)"}}}); changeChartSeriesColor(chart); changeChartSeriesGapWidthAndOverLap(chart); } }, { type: GC.Spread.Sheets.Charts.ChartType.columnStacked, desc: "columnStacked", dataArray: [ ["", 'Tokyo', 'New York', 'London', 'Berlin'], ["The First Quarter", 227.8, 260.9, 127, 110.1], ["The Second Quarter", 449.2, 283.9, 136.7, 167.8], ["The Third Quarter", 500.5, 300.5, 171, 165.4], ["The Fourth Quarter", 344.1, 282.4, 175.7, 137] ], dataFormula: "A1:E5", changeStyle: function (chart) { changeChartTitle(chart, "The Average Quarterly Rainfall"); changColumnChartDataLabels(chart); chart.axes({primaryValue: {title: {text: "Rainfall(mm)"}}}); changeChartSeriesColor(chart); changeChartSeriesGapWidthAndOverLap(chart); } }, { type: GC.Spread.Sheets.Charts.ChartType.columnStacked100, desc: "columnStacked100", dataArray: [ ["", 'Tokyo', 'New York', 'London', 'Berlin'], ["The First Quarter", 227.8, 260.9, 127, 110.1], ["The Second Quarter", 449.2, 283.9, 136.7, 167.8], ["The Third Quarter", 500.5, 300.5, 171, 165.4], ["The Fourth Quarter", 344.1, 282.4, 175.7, 137] ], dataFormula: "A1:E5", changeStyle: function (chart) { changeChartTitle(chart, "The Average Quarterly Rainfall"); changColumnChartDataLabels(chart); chart.axes({primaryValue: {title: {text: "Rainfall(%)"}}}); changeChartSeriesColor(chart); changeChartSeriesGapWidthAndOverLap(chart); } }]; var sheets = spread.sheets; spread.suspendPaint(); for (var i = 0; i < chartType.length; i++) { var sheet = sheets[i]; initSheet(sheet, chartType[i].desc, chartType[i].dataArray); var chart = addChart(sheet, chartType[i].type, chartType[i].dataFormula);//add chart chartType[i].changeStyle(chart); } spread.resumePaint(); } function initSheet(sheet, sheetName, dataArray) { sheet.name(sheetName); //prepare data for chart sheet.setArray(0, 0, dataArray); sheet.setColumnWidth(0, 120); } function addChart(sheet, chartType, dataFormula) { //add chart return sheet.charts.add((sheet.name() + 'Chart1'), chartType, 30, 100, 900, 400, dataFormula, GC.Spread.Sheets.Charts.RowCol.rows); } function changeChartTitle(chart, title) { chart.title({text: title}); } // show dataLabels function changColumnChartDataLabels(chart) { var dataLabels = chart.dataLabels(); dataLabels.showValue = true; dataLabels.showSeriesName = false; dataLabels.showCategoryName = false; var dataLabelPosition = GC.Spread.Sheets.Charts.DataLabelPosition; dataLabels.position = dataLabelPosition.outsideEnd; chart.dataLabels(dataLabels); } //change color function changeChartSeriesColor(chart) { var series = chart.series().get(); for (var i = 0; i < series.length; i++) { chart.series().set(i, {backColor: colorArray[i]}); } } function changeChartSeriesGapWidthAndOverLap(chart) { var seriesItem = chart.series().get(0); seriesItem.gapWidth = 2; seriesItem.overlap = 0.1; chart.series().set(0, seriesItem); }
<!doctype html> <html style="height:100%;font-size:14px;"> <head> <meta name="spreadjs culture" content="zh-cn" /> <meta charset="utf-8" /> <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$/spread/source/js/license.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; }