通過圖表上的每個系列的縮放級別動態地向平面圖中添加平均值

Question

我正在尋找一種將水平平均線添加到基於線圖的高圖表的可能性。它應該只計算實際可見點的平均值（重新繪製縮放級別的變化）和每個系列的平均值。

我發現只有一個例子calculates one average over all series。

Answer 1

下面是根據縮放級別計算每個系列的平均線的示例（受the solution of @jlbriggs的影響）。它甚至繼承了系列圖中平均線的顏色。

/** 
 
* Draws the average line for every series on chart 
 
* @param chart 
 
*/ 
 
function drawAverage(chart) { 
 
    // get the axis extremes to use as the x values 
 
    // for the average series 
 
    var ext = chart.xAxis[0].getExtremes(); 
 
    var min = ext.min; 
 
    var max = ext.max; 
 

 
    // loop through visible series data and build total/count 
 
    // to calculate average from 
 
    $.each(chart.series, function (i, series) { 
 
     // id of the average line 
 
     var avgId = 'average_' + series.index; 
 
     var total = 0; 
 
     var count = 0; 
 
     // index of the corresponding yAxis for correct mapping of average line 
 
     var yAxisIndex = chart.yAxis.indexOf(series.yAxis); 
 
     // remove the average line before drawing new one 
 
     chart.yAxis[yAxisIndex].removePlotLine(avgId); 
 

 
     // only draw the line if series is visible 
 
     if (series.visible === true) { 
 
      // calculate average based on visible data points 
 
      $.each(series.data, function (i, point) { 
 
       if (point && point.x >= min && point.x < max) { 
 
        total += point.y; 
 
        count++; 
 
       } 
 
      }); 
 

 
      var average = (total/count); 
 
      // console.log(series.name + ' with index ' + series.index + ' on yAxis ' + yAxisIndex + ': ' + average + ' = ' + total + '/' + count); 
 

 
      // add the average series 
 
      chart.yAxis[yAxisIndex].addPlotLine({ 
 
       id: avgId, 
 
       color: series.color, 
 
       dashStyle: 'shortdash', 
 
       width: 1, 
 
       value: average, 
 
       label: { 
 
        text: 'Ø ' + Math.round(average * 10)/10, 
 
        align: 'left', 
 
        x: -30, 
 
        style: { 
 
         color: series.color, 
 
        } 
 
       } 
 
      }); 
 
     } 
 
    }); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://code.highcharts.com/highcharts.js"></script> 
 
<script src="https://code.highcharts.com/highcharts-more.js"></script> 
 

 
<div id="container" style="width:600px;height:400px;"></div> 
 

 
<script> 
 
    $(function() { 
 
    $('#container').highcharts({ 
 
     chart: { 
 
     zoomType: 'x' 
 
     }, 
 
     title: { 
 
     text: 'Sleep' 
 
     }, 
 
     xAxis: { 
 
     crosshair: true, 
 
     type: 'datetime', 
 
     events: { 
 
      afterSetExtremes: function() { 
 
      drawAverage(this.chart); 
 
      }, 
 
     }, 
 
     }, 
 
     yAxis: [ 
 
     { 
 
      title: { 
 
      text: 'Sleep duration [h]' 
 
      }, 
 
     }, 
 
     { 
 
      title: { 
 
      text: 'Sleep quality [%]', 
 
      style: { 
 
       color: '#008000' 
 
      }, 
 
      }, 
 
      opposite: true, 
 
     }, 
 
     ], 
 
     tooltip: { 
 
     shared: true 
 
     }, 
 
     plotOptions: { 
 
     series: { 
 
      events: { 
 
      show: function() { 
 
       drawAverage(this.chart); 
 
      }, 
 
      hide: function() { 
 
       drawAverage(this.chart); 
 
      }, 
 
      }, 
 
     }, 
 
     }, 
 
     series: [ 
 
     { 
 
      name: 'Sleep duration', 
 
      data: [ 
 
        [1473372000000,7.74], 
 
        [1473458400000,9.22], 
 
        [1473544800000,8.09], 
 
        [1473631200000,8.49], 
 
        [1473717600000,8.02], 
 
        [1473804000000,7.99], 
 
        [1473890400000,7.71], 
 
        [1473976800000,7.95], 
 
        [1474063200000,8.81], 
 
        [1474149600000,9.26], 
 
        [1474236000000,7.69], 
 
        [1474322400000,7.37], 
 
        [1474408800000,8.37], 
 
        [1474495200000,8.13], 
 
        [1474581600000,8.18], 
 
        [1474668000000,7.55], 
 
        [1474754400000,7.79], 
 
        [1474840800000,8.29], 
 
        [1474927200000,7.82], 
 
        [1475013600000,8.24], 
 
        [1475100000000,7.68], 
 
        [1475186400000,7.9], 
 
        [1475272800000,8.26], 
 
        [1475359200000,7.62], 
 
        [1475445600000,8.69], 
 
        [1475532000000,8.47], 
 
        [1475618400000,8.43], 
 
        [1475704800000,7.63], 
 
        [1475791200000,8.28], 
 
        [1475877600000,7.75] 
 
      ], 
 
      color: '#696969', 
 
      tooltip: { 
 
      valueSuffix: ' h' 
 
      }, 
 
     }, 
 
     { 
 
      name: 'Sleep quality', 
 
      data: [ 
 
       [1473372000000,95], 
 
        [1473458400000,100], 
 
        [1473544800000,86], 
 
        [1473631200000,94], 
 
        [1473717600000,100], 
 
        [1473804000000,89], 
 
        [1473890400000,85], 
 
        [1473976800000,96], 
 
        [1474063200000,100], 
 
        [1474149600000,100], 
 
        [1474236000000,95], 
 
        [1474322400000,90], 
 
        [1474408800000,93], 
 
        [1474495200000,88], 
 
        [1474581600000,93], 
 
        [1474668000000,82], 
 
        [1474754400000,90], 
 
        [1474840800000,87], 
 
        [1474927200000,87], 
 
        [1475013600000,94], 
 
        [1475100000000,90], 
 
        [1475186400000,84], 
 
        [1475272800000,97], 
 
        [1475359200000,79], 
 
        [1475445600000,100], 
 
        [1475532000000,94], 
 
        [1475618400000,92], 
 
        [1475704800000,92], 
 
        [1475791200000,100], 
 
        [1475877600000,88] 
 
      ], 
 
      color: '#008000', 
 
      yAxis: 1, 
 
      tooltip: { 
 
      valueSuffix: ' %' 
 
      }, 
 
     }, 
 
     ], 
 
    }); 
 

 
    // draw average line on first load 
 
    chart = $('#container').highcharts(); 
 
    drawAverage(chart); 
 
    }); 
 
</script>

我做了符合plotLines但你可以很容易地更改到自己的系列：

// removing average series if there's one 
var averageSeries = chart.get(avgId); 
if(averageSeries != null) { 
    averageSeries.remove(); 
} 

// only draw the line if series is visible 
if (series.visible === true) { 

    // ... 


    // add the average series 
    chart.addSeries({ 
     id: avgId, 
     name: 'Average ' + series.name, 
     showInLegend: true, 
     type: 'line', 
     lineWidth: 1, 
     lineColor: series.color, 
     color: series.color, 
     dashStyle: 'shortdash', 
     zIndex: 5 + series.index, 
     data: [ 
      [min, average], 
      [max, average] 
     ] 
    }); 
}