如何为不规则时间图创建平均线？ [英] How to create an average line for an irregular time graph?

问题描述

我正在用HighCharts构建不规则的时间图，目前看起来像这样：

我想知道是否有可能为这三个（或可能更多的未来）线。

它将开始跟随蓝线，然后接近1月中旬的绿线，等等。

目前我正在使用的代码如下所示：

  $（'＃chart'）。 highcharts（{
 chart：{type：'spline'}，
 title：{text：''}，
 xAxis：{type：'datetime'}，
 yAxis： {
 title：{text：''} 
} 
 series：[{
 name：'Line 1'，
 data：[
 [Date .UTC（2014,0,16），173.33]，
 [Date.UTC（2014,0,23），163.33]，
 [Date.UTC（2014,0,30），137.67] ，
 [Date.UTC（2014,1,6），176.33]，
 [Date.UTC（2014,1,13），178.67]，
 [日期.UTC（2014,1,27），167.33]，
]，
颜色：'purple'
}，
 {
名称：'Line 2'， 
 data：[
 [Date.UTC（2014,0,11），156.33]，
 [Date.UTC（2014,1,15），167.67]，
] ，
 color：'green'
}，
 {
 name：'Line 3'，
 data：[
 [Date.UTC（2014， 0,1），135]，
 [Date.UTC（2014,0,5），146.33]，
 [Date.UTC（2014,0,27），146.75]，
 ]，
 color：'blue'
}] 
}）; 
  

解决方案

根据Mark提供的答案，I写了一些代码来生成一个自定义的第四行，使用来自所有三行的数据，并计算每个点的所需值。

我的新代码如下：

  line1 = [
 [Date.UTC（2014,0,16），173.33]，
 [ Date.UTC（2014,0,23），163.33]，
 [Date.UTC（2014,0,30），137.67]，
 [Date.UTC（2014,1,6），176.33 ]，
 [Date.UTC（2014,1,13），178.67]，
 [Date.UTC（2014,1,27），167.33]，
]; 
 
 line2 = [
 [Date.UTC（2014,0,11），156.33]，
 [Date.UTC（2014,1,15），167.67]，
]; 
 
 line3 = [
 [Date.UTC（2014,0,1），135]，
 [Date.UTC（2014,0,5），146.33]，
 [Date.UTC（2014,0,27），146.75]，
 [Date.UTC（2014,2,2），168.75] 
]; 
 
函数average（array，index）{
 sum = array [0] [1]; 
 for（var i = 1; i <= index; i ++）{
 sum + = array [i] [1]; 
} 
 
 value = sum /（index + 1）; 
 return parseFloat（value.toFixed（2））; 
} 
 
 //创建第四行，包含其他
 //三行的所有数据点，按日期排序
 all_lines = line1.concat（ LINE2）.concat（line3中）; 
 all_lines.sort（function（a，b）{return a [0]  -  b [0]}）; 
 
 //计算第四行中每个数据点的值 -  
 //所有值之前的平均值
 average_line = []; 
 for（var i = 0; i< all_lines.length; i ++）{
 average_line.push（[all_lines [i] [0]，average（all_lines，i）]）
 } 
 $ b $（'＃chart'）。highcharts（{
图表：{type：'spline'}，
 title：{
 text：''， 
}，
 xAxis：{
类型：'datetime'
}，
 yAxis：{
 title：{
 text：'' 
} 
}，
图例：{
 layout：'vertical'，
 align：'right'，
 verticalAlign：'middle'，
 borderWidth：0 
}，
 series：[{
 name：'Line 1'，
 data：line1，
 color：'purple'
 $，
 {
名称：'Line 2'，
 data：line2，
 color：'green'
}，
 {
名称：'Line 3'，
 data：line3，
颜色：'blue'
}，
 {
名称：'Average'，
 data：average_line，
 color：'red'
}] 
}）; 
  

现在看到的图形（蓝线上有一个额外的数据点）是： p>

I'm building irregular time graphs with HighCharts that at the moment look like so:

And I'm wondering if it's possible to create an 'average' line for the three (or possibly more in future) lines.

It would start following the blue line, then go closer to the green line mid-January, etc.

At the moment the code I'm working with looks like:

$('#chart').highcharts({
  chart: { type: 'spline' },
  title: { text: '' },
  xAxis: { type: 'datetime' },
  yAxis: {
    title: { text: '' }
  }
  series: [{
    name: 'Line 1',
    data: [
      [Date.UTC(2014,0,16), 173.33],
      [Date.UTC(2014,0,23), 163.33],
      [Date.UTC(2014,0,30), 137.67],
      [Date.UTC(2014,1,6), 176.33],
      [Date.UTC(2014,1,13), 178.67],
      [Date.UTC(2014,1,27), 167.33],
    ],
    color: 'purple'
  },
  {
    name: 'Line 2',
    data: [
      [Date.UTC(2014,0,11), 156.33],
      [Date.UTC(2014,1,15), 167.67],
    ],
    color: 'green'
  },
  {
    name: 'Line 3',
    data: [
      [Date.UTC(2014,0,1), 135],
      [Date.UTC(2014,0,5), 146.33],
      [Date.UTC(2014,0,27), 146.75],
    ],
    color: 'blue'
  }]
});

解决方案

Based on ideas provided by the answer from Mark, I wrote some code to generate a custom fourth line, using the data from all three lines, and calculating the required value for each point.

My new code is as follows:

  line1 = [
    [Date.UTC(2014,0,16), 173.33],
    [Date.UTC(2014,0,23), 163.33],
    [Date.UTC(2014,0,30), 137.67],
    [Date.UTC(2014,1,6), 176.33],
    [Date.UTC(2014,1,13), 178.67],
    [Date.UTC(2014,1,27), 167.33],
  ];

  line2 = [
    [Date.UTC(2014,0,11), 156.33],
    [Date.UTC(2014,1,15), 167.67],
  ];

  line3 = [
    [Date.UTC(2014,0,1), 135],
    [Date.UTC(2014,0,5), 146.33],
    [Date.UTC(2014,0,27), 146.75],
    [Date.UTC(2014,2,2), 168.75]
  ];

  function average(array, index) {
    sum = array[0][1];
    for(var i = 1; i <= index; i++) {
      sum += array[i][1];
    }

    value = sum / (index + 1);
    return parseFloat(value.toFixed(2));
  }

  // Make a fourth line with all of the data points for the other 
  // three lines, sorted by date    
  all_lines = line1.concat(line2).concat(line3);
  all_lines.sort(function(a, b) { return a[0] - b[0]});

  // Calculate the value for each data point in the fourth line - 
  // the average of all the values before it
  average_line = [];
  for(var i = 0; i < all_lines.length; i++) {
    average_line.push([all_lines[i][0], average(all_lines, i)])
  }

  $('#chart').highcharts({
    chart: { type: 'spline' },
    title: {
        text: '',
    },
    xAxis: {
        type: 'datetime'
    },
    yAxis: {
        title: {
            text: ''
        }
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle',
        borderWidth: 0
    },
    series: [{
        name: 'Line 1',
        data: line1,
        color: 'purple'
    },
    {
        name: 'Line 2',
        data: line2,
        color: 'green'
    },
    {
        name: 'Line 3',
        data: line3,
        color: 'blue'
    },
    {
        name: 'Average',
        data: average_line,
        color: 'red'
    }]
  });

The graph as it looks now (with one extra data point on the blue line) is:

这篇关于如何为不规则时间图创建平均线？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！