数据点

数据点是图表中的一段数据，显示链接数据区域中一个单元格内容的值。您可以为一些特殊的有意义的数据点设置特殊样式，使数据表示更加集中，图表更加直观和高效。

自定义数据点样式

SpreadJS提供了基于不同图表类型自定义图表系列数据点样式的选项，可以使用GC.Spread.Sheets.Charts.IDataPointStyle接口定义所有属性。

不同系列数据点的索引从0开始计数，从上到下、从左到右排列。

下表列出了不同类型图表的可用特性：

注意：面积图和填充雷达图不支持数据点，因此数据点API不适用于它们

旭日图和树状图的backColor和backColorTransparency属性也可以在旧的数据点样式结构中设置。

下面的代码示例演示如何对饼图中的每个数据点应用不同的背景色。

// 配置工作簿与工作表
var spread = new GC.Spread.Sheets.Workbook("ss",{ sheetCount: 4 });
var activeSheet = spread.getActiveSheet();

// 创建图表数据
var pieData = [
    ["", 'Chrome', 'Firefox', 'IE', 'Safari', 'Edge', 'Opera', 'Other'],
    ["2017", 0.6360, 0.1304, 0.0834, 0.0589, 0.0443, 0.0223, 0.0246]
];
spread.sheets[1].setArray(0, 0, pieData);
var dataRange = new GC.Spread.Sheets.Range(0, 0, 2, 8);
            
// 创建饼图
var pieChart = spread.sheets[1].charts.add('Pie Chart', GC.Spread.Sheets.Charts.ChartType.pie, 2, 50, 600, 350, "A1:H2");
pieChart.title({
    text: "Browser Market Share"
});
var pieStyle = pieChart.series().get(0);
            
// 自定义数据点样式
pieStyle.dataPoints = {
    0: {
        backColor: {
            type: GC.Spread.Sheets.Charts.PatternType.wideUpwardDiagonal,
            foregroundColor: "white",
            backgroundColor: "LightBlue",
        },
        backColorTransparency: 0.1,
    },
    1: {
        backColor: "Yellow",
    },
    2: {
        backColor: {
            type: GC.Spread.Sheets.Charts.PatternType.trellis,
            foregroundColor: "white",
            backgroundColor: "Green",
        }
    },
    3: {
        backColor: "Orange",
    },
    4: {
        backColor: "Red",
        backColorTransparency: 0.5,
    },
    5: {
        backColor: {
            type: GC.Spread.Sheets.Charts.PatternType.narrowVertical,
            foregroundColor: "white",
            backgroundColor: "Purple",
        }
    },
};

pieChart.series().set(0, pieStyle);

在图表系列中选择数据点时，将选择整个系列，再次选择数据点以在图表系列中专门自定义该数据点

在同一图表的另一系列中选择数据点将重新选择整个系列。