javascript - 通过图表上每个系列的缩放级别动态地将平均值添加到 Highcharts

Question

我正在寻找一种将水平平均线添加到基于线的 Highcharts 的可能性。它应该仅计算实际可见点的平均值(根据缩放级别的变化重新绘制)以及每个系列本身的平均值。

我只找到了一个例子 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]
        ]
    });
}