数据标记

SpreadJS允许用户使用不同类型的形状和线条来配置数据标记，从而使用户能够创建功能强大的图表。 数据标记用于突出显示图表中的数据点。 在使用折线图和雷达图时，您可以变更数据标记的外观以区分系列并增强数据可视化。

下列图表类型支持表单中数据标记的配置。

• 数据点折线图
• 数据点百分比堆积折线图
• 数据点堆积折线图
• 带直线和数据标记的散点图
• 带平滑线和数据标记的散点图
• 带标记的雷达图

**SymbolShape ** 枚举提供以下类型的形状在图表中配置数据标记。

SymbolShape	Value	Image
circle	0
dash	1
diamond	2
dot	3
none	4	none
plus	6
square	7
star	8
triangle	9
x	10

**LineType ** 枚举提供以下线型在图表中配置数据标记。

LineType	Value	Image
solid	0
dot	1
dash	2
lgDash	3
dashDot	4
lgDashDot	5
lgDashDotDot	6
sysDash	7
sysDot	8
sysDashDot	9
sysDashDotDot	10

示例

例如，假设您正在使用业务应用程序，该业务应用程序使用折线图显示不同Web浏览器的用法。 现在，您可能想要突出显示图表中单个点的颜色和形状，或修改系列中的所有数据点，而无需变更图表中的其他数据。 配置不同颜色和形状的数据标记将使您的图表在其他方面脱颖而出，并使业务分析人员可以轻松快捷地操作和突出显示重要信息。

下图描绘了带有标记的折线图。 线上的每个点都是一个数据标记，代表位于单元格中的单个数据值。

代码

请参考以下代码，以便在折线图中配置数据标记。

<script>
$(document).ready(function ()
{
var chart_line, chart_lineStacked, chart_lineStacked100, sheet;
window.onload = function ()
{
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
var sheet = spread.getActiveSheet();
var dataArray =
[
["", '2012', '2013', '2014', '2015', '2016', '2017'],
["Chrome", 0.3782, 0.4663, 0.4966, 0.5689, 0.6230, 0.6360],
["FireFox", 0.2284, 0.2030, 0.1801, 0.1560, 0.1531, 0.1304],
["IE", 0.3214, 0.2491, 0.2455, 0.1652, 0.1073, 0.0834],
];
sheet.setArray(0, 0, dataArray);
var chart = sheet.charts.add('chart1', GC.Spread.Sheets.Charts.ChartType.lineMarkers, 30, 85, 400, 250, 'A1:G4');
var ser1 = chart.series().get(0);
ser1.symbol =
{
fill: 'red',
fillColorTransparency: 0.3,
size: 20,
shape: GC.Spread.Sheets.Charts.SymbolShape.triangle,
border:
{
 color: "green",
 width: 2,
 lineType: GC.Spread.Sheets.Charts.LineType.solid,
 colorTransparency: 0.5,
}
}
chart.series().set(0, ser1);
};
});
</script>