概述
本 Demo 展示了如何为图表中的单个数据点设置自定义样式。Demo 创建了 4 个工作表，分别包含柱状图、条形图、饼图和旭日图，每个图表都对特定的数据点应用了不同的样式，包括纯色填充、图案填充、边框样式等。
实现思路
为每个图表准备数据源并添加到工作表
使用 charts.add() 方法创建不同类型的图表
为每个图表设置基础样式（标题、数据标签、系列颜色等）
通过 series().set() 方法和 dataPoints 属性为特定数据点设置自定义样式
数据点样式支持背景色、背景透明度、边框颜色、边框宽度等属性
代码解析
为数据点设置自定义样式
这段代码遍历图表的所有系列，为每个系列设置数据点样式。dataPoints 是一个对象，键为数据点索引，值为样式配置对象。
数据点样式配置示例
这段代码为第一个系列的第 8 个数据点设置红色背景和蓝色边框。数据点索引从 0 开始计数。
使用图案填充
backColor 属性除了支持纯色外，还支持图案填充。通过 PatternType 可以设置不同的图案类型，包括斜线、网格等多种样式。
运行效果
柱状图：展示了东京、纽约、伦敦、柏林四个城市的月降雨量数据，第 9 个月（9月）的数据点被标记为红色背景和彩色边框，突出显示降雨量最高的月份
条形图：展示了季度降雨量数据，其中一个数据点使用红色背景和灰色边框标记
饼图：展示了浏览器市场份额，Chrome 的数据点使用斜线图案填充
旭日图：展示了世界人口分布，印度地区的数据点使用绿色背景和浅青色边框标记
API 参考
series().set() 方法
index：系列索引
seriesItem.dataPoints：数据点样式对象，键为数据点索引，值为样式配置
数据点样式属性
backColor：数据点背景色，支持纯色字符串或图案填充对象
backColorTransparency：背景色透明度，取值范围 0-1
border.color：边框颜色
border.width：边框宽度
border.transparency：边框透明度
border.lineType：边框线条类型
var spread;
var colorArray = ['rgb(120, 180, 240)', 'rgb(240, 160, 80)', 'rgb(140, 240, 120)', 'rgb(120, 150, 190)'];
window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), {
sheetCount: 4
});
initSpread(spread);
}
function initSpread(spread) {
var chartType = [{
type: GC.Spread.Sheets.Charts.ChartType.columnClustered,
desc: "columnClustered",
position: [15, 100, 1300, 400],
dataArray: [
["", 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov',
'Dec'
],
["Tokyo", 49.9, 71.5, 106.4, 129.2, 144.0, 146.0, 135.6, 148.5, 256.4, 155.1,
95.6, 54.4
],
["New York", 83.6, 78.8, 98.5, 93.4, 106.0, 199.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, 186.2, 59.3,
51.2
],
["Berlin", 42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 178.6, 39.1, 46.8, 51.1]
],
dataFormula: "A1:M5",
dataPoinsStyle: [{
8: {
backColor: "red",
backColorTransparency: 0.1,
border: {
color: 'rgb(120, 180, 240)',
width: 5,
}
},
},
{
5: {
backColor: "black",
backColorTransparency: 0.1,
border: {
color: 'rgb(240, 160, 80)',
width: 5,
}
}
},
{
9: {
backColor: "black",
backColorTransparency: 0.1,
border: {
color: 'rgb(140, 240, 120)',
width: 5,
}
},
},
{
8: {
backColor: "black",
backColorTransparency: 0.1,
border: {
color: 'rgb(120, 150, 190)',
width: 5,
}
}
}
],
changeStyle: function (chart, dataPoinsStyle) {
changeChartTitle(chart, "The Average Monthly Rainfall");
changChartDataLabels(chart);
chart.axes({
primaryValue: {
title: {
text: "Rainfall(mm)"
}
}
});
changeChartSeriesColor(chart);
changeChartSeriesDataPointStyle(chart, dataPoinsStyle);
changeChartSeriesGapWidthAndOverLap(chart);
}
},
{
type: GC.Spread.Sheets.Charts.ChartType.barClustered,
desc: "barClustered",
position: [15, 100, 1300, 400],
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",
dataPoinsStyle: [, ,
{
0: {
backColor: "red",
backColorTransparency: 0.1,
border: {
color: 'gray',
width: 5,
}
}
}
],
changeStyle: function (chart, dataPoinsStyle) {
changeChartTitle(chart, "The Average Quarterly Rainfall");
changChartDataLabels(chart);
changeChartSeriesColor(chart);
changeChartSeriesDataPointStyle(chart, dataPoinsStyle);
changeChartSeriesGapWidthAndOverLap(chart);
}
},
{
type: GC.Spread.Sheets.Charts.ChartType.pie,
desc: "pie",
position: [15, 100, 700, 400],
dataArray: [
["", 'Chrome', 'Firefox', 'IE', 'Safari', 'Edge', 'Opera', 'Other'],
["2017", 0.6360, 0.1304, 0.0834, 0.0589, 0.0443, 0.0223, 0.0246]
],
dataFormula: "A1:H2",
dataPoinsStyle: [{
0: {
backColor: {
type: GC.Spread.Sheets.Charts.PatternType.wideUpwardDiagonal,
foregroundColor: "white",
backgroundColor: "LightBlue",
},
backColorTransparency: 0.1,
},
},],
changeStyle: function (chart, dataPoinsStyle) {
changeChartTitle(chart, "Browser Market Share");
changChartDataLabels(chart);
changeChartSeriesDataPointStyle(chart, dataPoinsStyle);
}
},
{
type: GC.Spread.Sheets.Charts.ChartType.sunburst,
desc: "sunburst",
position: [300, 50, 700, 400],
dataArray: [
['Region', 'Subregion', 'Country', 'Population'],
['Asia', 'Southern', 'India', 1354051854],
[, , 'Pakistan', 200813818],
[, , 'Bangladesh', 166368149],
[, , 'Others', 170220300],
[, 'Eastern', 'China', 1415045928],
[, , 'Japan', 127185332],
[, , 'Others', 111652273],
[, 'South-Eastern', , 655636576],
[, 'Western', , 272298399],
[, 'Central', , 71860465],
['Africa', 'Eastern', , 433643132],
[, 'Western', , 381980688],
[, 'Northern', , 237784677],
[, 'Others', , 234512021],
['Europe', , , 742648010],
['Others', , , 1057117703]
],
dataFormula: "A1:D17",
dataPoinsStyle: [{
6: {
backColor: "limegreen ",
border: {
color: 'lightcyan ',
width: 9,
}
}
},],
changeStyle: function (chart, dataPoinsStyle) {
changeChartTitle(chart, "World Population");
changeChartSeriesDataPointStyle(chart, dataPoinsStyle);
}
}
];
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, chartType[i].position); //add chart
chartType[i].changeStyle(chart, chartType[i].dataPoinsStyle);
}
spread.resumePaint();
}
function initSheet(sheet, sheetName, dataArray) {
sheet.name(sheetName);
//prepare data for chart
sheet.setArray(0, 0, dataArray);
sheet.setColumnCount(100);
}
function addChart(sheet, chartType, dataFormula, position) {
//add chart
return sheet.charts.add((sheet.name() + 'Chart1'), chartType, position[0], position[1], position[2], position[3], dataFormula, GC
.Spread.Sheets.Charts.RowCol.rows);
}
function changeChartTitle(chart, title) {
chart.title({
text: title
});
}
// show dataLabels
function changChartDataLabels(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 point style
function changeChartSeriesDataPointStyle(chart, dataPoinsStyle) {
var series = chart.series().get();
for (var i = 0; i < series.length; i++) {
if (dataPoinsStyle[i]) {
chart.series().set(i, {
dataPoints: dataPoinsStyle[i]
});
}
}
}
//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.5;
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$/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 class="sample-tutorial">
<div id="ss" class="sample-spreadsheets"></div>
</div>
</div>
</body>
</html>
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets {
width: 100%;
height: 100%;
overflow: hidden;
float: left;
}
.option-row {
font-size: 14px;
padding: 5px;
}
.option-row {
padding-bottom: 5px;
}
label {
display:inline-block;
}
input{
padding: 1px 8px;
box-sizing: border-box;
width: 100%;
}
select{
width: 100%;
}
input[type=checkbox] {
display: inline-block;
width: auto;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
