将趋势线添加到图表

SpreadJS允许用户在可视化表单中的数据的同时向图表添加趋势线。

什么是趋势线？

趋势线，也称为最佳拟合线，是图表中的另一条线，它指示特定数据系列中的斜率（趋势），以帮助用户快速分析整体趋势（即使当您的价格波动时 数据点）。

使用场景

向图表添加趋势线可以证明是对您的组织非常有用的分析工具，您可以使用它来显示一段时间内的数据移动或简单地描述两个变量之间的相关性。

趋势线在以下情况下非常有用：

• 得出趋势并预测未来价值。
• 分析库存，交易，财务和销售数据。
• 协助趋势分析以创建数据分析策略。

示例 : 以下截图通过使用图表中的不同趋势线，描绘了三种不同产品（手机，笔记本电脑和平板电脑）的年度销售记录。

趋势线的类型

下表描述了在SpreadJS中使用图表时支持的各种趋势线。

趋势线类型	描述	示例
线性趋势线	线性趋势线是最合适的直线，它显示数据系列中的值如何以稳定的速率增加或减少，并为图表中的数据提供未来的近似值。 如果数据模式类似于直线，则数据为线性。 方程 -:  y=mx + b 其中，m是斜率，b是截距。
指数趋势线	指数趋势线是最合适的曲线，当数据值以更高的速率上升（增加）或下降（下降）然后趋于稳定时，该曲线最有用。 方程式 -： y = ce其中c和b是常数，e是自然对数的底数。 > 注意 : 该趋势线只能与正数一起使用。 如果数据包含零或负值，则用户无法创建指数趋势线。
对数趋势线	对数趋势线是最合适的曲线，它说明数据值如何快速增加或减少然后稳定。 这种趋势线既可以使用正值也可以使用负值。 方程式-: y=c ln x + b 其中c和b是常数，ln是自然对数函数。
多项式趋势线	多项式趋势线是说明数据值波动的曲线。 这种趋势线基于订单属性，可帮助用户分析大型数据集（例如股票，交易和财务应用程序）的收益或损失。 方程式-: y=b + c_1x + c_2x + c_3x + ... 其中c1，c2，c3是常数。 对于此趋势线，默认值为2。顺序应为2-6之间的正整数。 如果订单值超出范围，那么结果将如下表所示： THIS_IS_A_WRONG_FORMAT_FOR_MARKDOWN	多项式的阶数值	描述	值 <2 (小于 2)	将被视为2。	值 >6 (大于 6)	将被视为6。	十进制值	用户需要使用Math.floor将十进制值转换为整数。	其他类型值	趋势线将不会显示。
多项式的阶数值	描述
值 <2 (小于 2)	将被视为2。
值 >6 (大于 6)	将被视为6。
十进制值	用户需要使用Math.floor将十进制值转换为整数。
其他类型值	趋势线将不会显示。
功率趋势线	功率趋势线是一条曲线，可用于比较以特定速率增加的测量。 注意-此趋势线只能与正数一起使用。 如果数据包含零或负值，则用户无法创建功率趋势线。 方程式-: y=cx^b 其中c和b是常数。
移动平均趋势线	移动平均趋势线是一种趋势线，可将趋势线的波动减小到更平滑的显示模式。 这种趋势线基于期间属性，通常用于通过考虑指定期间数的平均值来显示趋势。 方程式-: P_m= P_m-1+ (y_m- y_m- n) / n 该趋势线的默认值为2。第二和第三数据点的平均值用作趋势线中的第二点，依此类推。 最大周期是数据集的长度。 例如-如果图中有10个数据集，则最大周期为9，因此，如果数据集的长度小于3，则将不显示移动平均线的趋势线。 周期应为2个最大周期的正整数。 如果不是，那么结果将如下表所示： THIS_IS_A_WRONG_FORMAT_FOR_MARKDOWN	期间值	描述	值 <2 (小于 2)	将被视为2。	值 > 最大期限（大于最大期限）	将被视为最长期限	十进制值	用户需要使用Math.floor将十进制值转换为整数	其他类型的值	趋势线将不会显示
期间值	描述
值 <2 (小于 2)	将被视为2。
值 > 最大期限（大于最大期限）	将被视为最长期限
十进制值	用户需要使用Math.floor将十进制值转换为整数
其他类型的值	趋势线将不会显示

除了以上六种趋势线类型外，SpreadJS还支持趋势线的自定义名称。 如果用户未设置趋势线名称，则会提供内置名称。 模板应该是这样的：

• 对于移动平均趋势线: 'period MovingAverage()'. 示例: '3period MovingAverage(Bears)'.
• 对于其他类型的趋势线: '()'. 示例: 'Logarithmic(Bears)'.

支持的图表类型

在图表中添加趋势线时，支持以下图表类型：:

• 柱形图
• 条形图
• 折线图
• 散点图
• 面积图

注意: 向图表添加趋势线时，必须牢记以下限制：

代码

下面的示例代码使用图表中的不同趋势线描绘了年度销售记录。

var activeSheet = spread.getActiveSheet();
activeSheet.suspendPaint();
// Prepare data for chart
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 TrendLines on series[0] i.e. Mobile Phones
var series1 = chart_columnClustered.series().get(0);
series1.trendlines = [
{
type: 2,
forward: 2,
name: "MovingAverage",
style: { color: "blue"
},
period: 3 // only used for Moving Average Trendline
}];
// Adding TrendLines on series[1] i.e. Laptops
var series2 = chart_columnClustered.series().get(1);
series2.trendlines = [
{
type: 2,
forward: 2,
name: "MovingAverage",
style:
{
color: "red"
},
period: 3
}];
// Adding TrendLines on series[2] i.e. Tablets
var series3 = chart_columnClustered.series().get(2);
series3.trendlines =
[
{
type: 2,
forward: 2,
name: "MovingAverage",
style: {color: "green"
},
period: 3
}];
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 = "Annual Sales Record";
title.fontFamily = "Cambria";
title.fontSize = 28;
title.color = "Red";
chart_columnClustered.title(title);
activeSheet.resumePaint();