SpreadJS supports columnClustered, columnStacked, and columnStacked100 column charts. You can use the GC.Spread.Sheets.Charts.ChartType.columnClustered property to get the chart type.
For example, you can insert a columnClustered chart type and change the chart style using the chart API.
The column chart can be stacked normally or 100 percent using the columnStacked and columnStacked100 chart types.
The columnStacked chart type stacks the series vertically.
The ColumnStacked100 chart type stacks the series vertically and equalizes the values to meet 100 percent.
<template>
<div class="sample-tutorial">
<gc-spread-sheets class="sample-spreadsheets" @workbookInitialized="initSpread">
<gc-worksheet />
<gc-worksheet />
<gc-worksheet />
</gc-spread-sheets>
</div>
</template>
<script setup>
import GC from "@mescius/spread-sheets";
import {
ref
} from "vue";
import "@mescius/spread-sheets-vue";
import "@mescius/spread-sheets-charts";
const spreadRef = ref(null);
const colorArray = [
"rgb(120, 180, 240)",
"rgb(240, 160, 80)",
"rgb(140, 240, 120)",
"rgb(120, 150, 190)"
];
function initSpread(spread) {
spreadRef.value = spread;
let 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);
}
}
];
let sheets = spread.sheets;
spread.suspendPaint();
for (let i = 0; i < chartType.length; i++) {
let sheet = sheets[i];
initSheet(sheet, chartType[i].desc, chartType[i].dataArray);
let 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) {
let dataLabels = chart.dataLabels();
dataLabels.showValue = true;
dataLabels.showSeriesName = false;
dataLabels.showCategoryName = false;
let dataLabelPosition = GC.Spread.Sheets.Charts.DataLabelPosition;
dataLabels.position = dataLabelPosition.outsideEnd;
chart.dataLabels(dataLabels);
}
//change color
function changeChartSeriesColor(chart) {
let series = chart.series().get();
for (let i = 0; i < series.length; i++) {
chart.series().set(i, { backColor: colorArray[i] });
}
}
function changeChartSeriesGapWidthAndOverLap(chart) {
let seriesItem = chart.series().get(0);
seriesItem.gapWidth = 2;
seriesItem.overlap = 0.1;
chart.series().set(0, seriesItem);
}
</script>
<style scoped>
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets {
width: 100%;
height: 100%;
overflow: hidden;
float: left;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#app {
height: 100%;
}
</style>
<!DOCTYPE html>
<html style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>SpreadJS VUE</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css"
href="$DEMOROOT$/en/vue3/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/en/vue3/node_modules/systemjs/dist/system.src.js"></script>
<script src="./systemjs.config.js"></script>
<script src="./compiler.js" type="module"></script>
<script>
var System = SystemJS;
System.import("./src/app.js");
System.import('$DEMOROOT$/en/lib/vue3/license.js');
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
(function (global) {
SystemJS.config({
transpiler: 'plugin-babel',
babelOptions: {
es2015: true
},
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
packageConfigPaths: [
'./node_modules/*/package.json',
"./node_modules/@mescius/*/package.json",
"./node_modules/@babel/*/package.json",
"./node_modules/@vue/*/package.json"
],
map: {
'vue': "npm:vue/dist/vue.esm-browser.js",
'tiny-emitter': 'npm:tiny-emitter/index.js',
'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js',
"systemjs-babel-build": "npm:systemjs-plugin-babel/systemjs-babel-browser.js",
'@mescius/spread-sheets': 'npm:@mescius/spread-sheets/index.js',
'@mescius/spread-sheets-resources-en': 'npm:@mescius/spread-sheets-resources-en/index.js',
'@mescius/spread-sheets-vue': 'npm:@mescius/spread-sheets-vue/index.js',
'@mescius/spread-sheets-shapes': 'npm:@mescius/spread-sheets-shapes/index.js',
'@mescius/spread-sheets-charts': 'npm:@mescius/spread-sheets-charts/index.js',
},
meta: {
'*.css': { loader: 'systemjs-plugin-css' },
'*.vue': { loader: "../plugin-vue/index.js" }
}
});
})(this);
