Highcharts散点图中的移动平均线

Question

我正在尝试在 Highachart 的散点图中实现移动平均线。 x 轴是日期，y 轴是天，但是当我尝试计算移动平均值时，它指的是 1970 年的日期。

js fiddle link for my code

我也有code without moving average

这是我正在使用的带有移动平均线的 Highchart 代码：

Highcharts.chart('container', {
chart: {
    type: 'scatter',
    zoomType: 'xy'
},
title: {
    text: 'Height Versus Weight of 507 Individuals by Gender'
},
subtitle: {
    text: 'Source: Heinz  2003'
},
xAxis: {
  title: {
    enabled: true,
    text: 'PR Creation'
  },
  startOnTick: true,
  endOnTick: true,
  showLastLabel: true,
  type: 'datetime',
  dateTimeLabelFormats: {
  second: '%Y-%m-%d<br/>%H:%M:%S',
  minute: '%Y-%m-%d<br/>%H:%M',
  hour: '%Y-%m-%d<br/>%H:%M',
  day: '%Y<br/>%m-%d',
  week: '%Y<br/>%m-%d',
  month: '%Y-%m',
  year: '%Y'
}
},
 yAxis: {
title: {
  text: 'duration'
},
type: 'datetime', //y-axis will be in milliseconds
dateTimeLabelFormats: {
minute: '%H:%M'
                      }
 },
legend: {
    layout: 'vertical',
    align: 'left',
    verticalAlign: 'top',
    x: 100,
    y: 70,
    floating: true,
    backgroundColor: Highcharts.defaultOptions.chart.backgroundColor,
    borderWidth: 1
},
plotOptions: {
    scatter: {
        marker: {
            radius: 5,
            states: {
                hover: {
                    enabled: true,
                    lineColor: 'rgb(100,100,100)'
                }
            }
        },
        states: {
            hover: {
                marker: {
                    enabled: false
                }
            }
        },
        tooltip: {
            headerFormat: '<b>{series.name}</b><br>',
            pointFormat: '{point.x}'
        }
    }
},
 
series: [{
    name: 'PR',
    color: 'rgba(223, 83, 83, .5)',
     data: [{x:st4,y:3},{x:st5,y:7},{x:st6,y:8},{x:st7,y:9},{x:st8,y:9},{x:st9,y:7},{x:st10,y:7},{x:st11,y:3},{x:st12,y:2}]

},
{
   name: 'PR',
    color: 'green',
     data: [{x:st,y:5},{x:st3,y:7},{x:st11,y:1}]
}]
}
 ,function() {
            var Highcharts = this;
            var series = Highcharts.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]);
                }
            }
            Highcharts.addSeries({
                name: 'Moving Average',
                data: data
            });
        });

计算移动平均线有什么问题？我正在尝试实现类似于 Azure Devops 中的循环时间小部件

Answer 1

把你的函数改成这样：

    function() {
            var Highcharts = this;
            var series = Highcharts.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({x:series.data[i].x,y: null});
                } else {
                    sumForAverage -= series.data[i-period].y;
                    data.push({x:series.data[i].x,y: sumForAverage/period});
                }
            }
    
            Highcharts.addSeries({
                name: 'Moving Average',
                data: data
            });
        });

我只是改变了对应系列的格式。

输出：