在图表中添加误差线

SpreadJS允许用户添加，修改和删除图表中的误差线。 在使用图表时，可以将误差线添加到常规数据系列的顶部。 用户可以在数据系列的所有数据点或数据标记上显示误差条，以标准误差量，百分比或标准差的形式显示。

使用场景

误差线是科学家，统计学家和研究分析人员展示数据可变性和测量准确性的极其有用的工具。

在图表中包含误差线是有益的，尤其是在用户需要：

• 一目了然地识别和分析误差范围和标准偏差。
• 指示错误或量化有关数据序列中单个或多个数据点的不确定性。
• 在要求最高精度的应用程序上工作。 在这种情况下，误差线可确保准确性，即使有很小的百分比也不会冒险进行数据分析和研究结果。

示例 : 假设您要在科学实验或会计应用程序的结果中显示15％的正负误差量，则可以在图表中配置误差线以描绘此类数据。

除了计算和显示置信区间，误差范围和标准偏差外， 误差线还提供了一种有效的方法来增强图表的整体数据可视化。

支持的图表类型

在图表中添加误差线时，支持以下图表类型：

• 柱形图
• 条形图
• 折线图
• xy散点图
• 面积图
• 气泡图

方向和顺序规则

误差线的方向由您使用的图表类型自动确定，用户无法设置和修改此属性。

• 对于柱形图，折线图或面积图，误差线将在垂直方向显示。
• 对于条形图，误差线将在水平方向上显示。
• 对于xyScatter或气泡图，可以在水平方向，垂直方向以及水平和垂直方向上同时显示误差线。

绘制误差线和其他图表元素的顺序取决于用户选择的图表类型。

• 当图表类型为面积，柱形和条形时； 然后在前面绘制误差线。
• 当图表类型为折线，散点图和气泡时； 然后在后面画出误差线。

错误栏类型

用户可以在图表中添加三种不同类型的误差线。 这包括"Plus", "Minus", 以及 "Both"。

误差线末端样式

用户可以通过切换在线端盖的可见性来调整误差线的默认外观。 可用选项为 "No Cap" 与 "Cap"。

误差线数量

用户可以设置自己的值以显示所需的确切错误量。 可用选项为"Fixed Value", "Percentage", "Standard Deviation", "Standard Error", 与Custom。

代码

以下示例代码描述了如何在图表中使用不同的误差线。

var activeSheet = spread.getActiveSheet();
activeSheet.suspendPaint();
// 为图表准备数据
activeSheet.setValue(0, 1, "Y-2016");
activeSheet.setValue(0, 2, "Y-2017");
activeSheet.setValue(0, 3, "Y-2018");
activeSheet.setValue(1, 0, "Mobile Phones");
activeSheet.setValue(2, 0, "Laptops");
activeSheet.setValue(3, 0, "Tablets");
for (var r = 1; r <= 3; r++) {
for (var c = 1; c <= 3; c++) {
activeSheet.setValue(r, c, parseInt(Math.random() * 5000));
}
}
// Add columnClustered chart
chart_columnClustered = activeSheet.charts.add('chart_columnClustered', GC.Spread.Sheets.Charts.ChartType.columnClustered, 50, 100, 600, 400, "A1:D4");
// Adding ErrorBars on series[0] i.e. Mobile Phones
var series1 = chart_columnClustered.series().get(0);
series1.errorBars = {
vertical: {
type: 1, // minus
valueType: 2, // percentage
value: 70, // 70%
noEndCap: false, // no end cap
style: {
color: 'red', // line color
  width: 1.5 // width of line
}
}
};
// Adding ErrorBars on series[1] i.e. Laptops
var series2 = chart_columnClustered.series().get(1);
series2.errorBars = {
vertical: {
type: 1, // minus
valueType: 2, // percentage
value: 70, // 70%
noEndCap: false, // no end cap
style: {
color: 'blue', // line color
  width: 1.5 // width of line
}
}
};
// Adding ErrorBars on series[2] i.e. Tablets
var series3 = chart_columnClustered.series().get(2);
series3.errorBars = {
vertical: {
type: 1, // minus
valueType: 2, // percentage
value: 70, // 70%
noEndCap: false, // no end cap
style: {
color: 'green',// line color
  width: 1.5 // width of line
}
}
};
chart_columnClustered.series().set(0, series1);
chart_columnClustered.series().set(1, series2);
chart_columnClustered.series().set(2, series3);
// Configure Chart Title
var title = chart_columnClustered.title();
title.text = "Error Bars for Annual Sales Record";
title.fontFamily = "Cambria";
title.fontSize = 28;
title.color = "Red";
chart_columnClustered.title(title);
activeSheet.resumePaint();