如何在Highcharts中实现移动平均线

Question

我想在highchart中实现移动平均线。是否有任何选项可以实现这个功能？

比如，我有一个系列：10, 20, 30, 40, 50, 60, 70，那么移动平均线将会是2。

然后第二个系列将基于第一个系列的平均值生成，例如：15, 35, 105（每两个数据点取平均值）。

将这个移动平均线系列嵌入到同一张图表的series1上。

- abhishek mehra

Answer 1

你可以像这样计算移动平均值并将其添加进去：

$('#buttonAddSeries').click(function() {
    var series = chart.series[0];
    var data = [];
    var period = 2;
    var sumForAverage = 0;
    var i;
    for(i=0;i<series.data.length;i++) {
        sumForAverage += series.data[i].y;
        if(i<period) {
            data.push(null);
        } else {
            sumForAverage -= series.data[i-period].y;
            data.push([series.data[i].x, sumForAverage/period]);
        }
    }
    chart.addSeries({
        name: 'Moving Average',
        data: data
    });
});

您可以使用任意数量的点作为句号，不仅限于2个。

- meir shapiro

Answer 2

使用技术指标插件（此处）可以支持移动平均线。

这里有一个链接JavaScript源代码，你需要将其包含在内：

通过向图表添加另一个类型为“趋势线”，算法为“SMA”的系列来实现，该系列通过ID引用相关数据系列：

series : [
{
  name: 'AAPL Stock Price',
  type : 'line',
  id: 'primary',
  data : [100,101,105,107,104,105,106,104,...]
}, {
  name: '15-day SMA',
  linkedTo: 'primary',
  showInLegend: true,
  type: 'trendline',
  algorithm: 'SMA',
  periods: 15
}]

这里是一个JSFiddle。

- Soma Holiday

Answer 3

目前，HighCharts没有进行此类数据分析的功能。您需要自己生成移动平均线，并将其创建为自己的系列或plotLine/plotBand。

- wergeld

Answer 4

现在有一个Highcharts插件，可以添加SMA（简单移动平均线）。

详情请见：http://www.highcharts.com/plugin-registry/single/16/technical-indicators

- Corstian Boerman

Answer 5

如果你想要比for循环更高效的东西：

$('#buttonAddSeries').click(function() {

    var series = chart.get('seriesId')
    var yData = series.processedYData
    var xData = series.processedXData
    var data = [];
    var period = 3;
    
    /* sumForAverage initialised to sum of yData indexed between 0 and period */
    var sumForAverage = yData.slice(0, period).reduce(function(prev, cur) {
        return prev + cur;
    });
    
    /* Subset yData from period to end. */
    yDataWindow = yData.slice(period, yData.length)
    
    /* At each point add the new value and subtract yData[currentIndex]. */
    yDataWindow.reduce(function(previousValue, currentValue, currentIndex) {
        /* push each iteration to data */
        data.push([xData[currentIndex + period], previousValue/period])
        return previousValue + currentValue - yData[currentIndex]
      /* sumForAverage is passed as starting value */
    }, sumForAverage)
    
    chart.addSeries({
        name: 'Moving Average',
        data: data
    });
});

示例：携带数据的JS Fiddle

- Titus Buckworth