Highcharts为一组值创建addPlotLine [英] Highcharts addPlotLine for one set of values

问题描述

我有以下代码。在给定的一天中，它会显示平均等待时间和最长等待时间（以秒为单位）。情节线目前给出这两个值的平均值。我想要的是平均值只考虑了用户选择的特定时间段内的平均时间，该行将显示该时间段的平均值

I have the following code. For a given day it shows the average wait time and the maximum wait time in seconds. The plotline currently gives an average of these two values. What I would like is that the average just take into account the average times so for a particular period as chosen by the user, the line would display the average for that period

var seriesOptionsChatChart = [],
seriesCounterChatChart = 0,
namesChatChart = ['ChatChartAVG','ChatChartMAX'];

function createChartChatChart() {

    Highcharts.stockChart('chart27', {

        rangeSelector: {
            buttons: [{
                type: 'day',
                count: 1,
                text: '1d'
            },{
                type: 'day',
                count: 5,
                text: '5d'
            }, {
                type: 'week',
                count: 1,
                text: '1w'
            }, {
                type: 'month',
                count: 1,
                text: '1m'
            }, {
                type: 'month',
                count: 3,
                text: '3m'
            }, {
                type: 'year',
                count: 1,
                text: '1y'
            }, {
                type: 'all',
                text: 'All'
            }],
            selected: 3 // all
        },
    credits: {
          enabled: false
      },
          chart: {
            zoomType: 'x',
            events: {
                load: computeAvg,
                redraw: computeAvg
            }
        },

        yAxis: {

            plotLines: [{
                value: 0,
                width: 2,
                color: 'silver'
            }],
            title: {
                text: 'Seconds'
            }
        },

        plotOptions: {
            series: {
                showInNavigator: true,
                turboThreshold:0
            }
        },

        tooltip: {
            pointFormat: '<span style="color:{series.color}">Seconds</span>: <b>{point.y}</b><br/>',
            split: true
        },

        series: seriesOptionsChatChart
    });
}

$.each(namesChatChart, function (i, name) {

    $.getJSON('/' + name.toLowerCase(),    function (data) {

        if (name=='ChatChartMAX') {
            seriesColour = '#D50000';
        }
        else {
            seriesColour = '#1DA2B6';
        }

        seriesOptionsChatChart[i] = {
            name: name,
            data: data,
            color: seriesColour,
        };
        seriesCounterChatChart += 1;
        if (seriesCounterChatChart === namesChatChart.length) {
            createChartChatChart();
        }
    });
});


function computeAvg() {
    var chart = this,
        series = chart.series,
        yAxis = chart.yAxis[0],
        xAxis = chart.xAxis[0],
        extremes = xAxis.getExtremes(),
        min = extremes.min,
        max = extremes.max,
        plotLine = chart.get('avgLine'),
        sum = 0,
        count = 0;

    Highcharts.each(series, function (serie, i) {
        if(serie.name !== 'Navigator') {
            Highcharts.each(serie.data, function (point, j) {
                if (point.x >= min && point.x <= max) {
                    sum += point.y;
                    count++;
                }
            });
        }
    });

    yAxis.removePlotLine('avgLine');
    yAxis.addPlotLine({
        value: (sum/count),
        color: '#52B184',
        width: 2,
        id: 'avgLine',
        label: {
          text: (sum / count).toFixed(2),
          verticalAlign: 'middle',
          align: 'right',
          rotation: 0,
        }           
    });

}

推荐答案

code> if（serie.name！=='Navigator'）{专注于我想要的系列

Changed if(serie.name !== 'Navigator') { to focus on the series I wanted

这篇关于Highcharts为一组值创建addPlotLine的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！