Highcharts addPlotLine用于一组值

时间:2017-06-05 10:18:44

标签: jquery highcharts highstock

我有以下代码。在给定的一天,它显示平均等待时间和最长等待时间(以秒为单位)。情节线目前给出了这两个值的平均值。我想要的是,平均值只考虑平均时间,因此对于用户选择的特定时期,该行将显示该时段的平均值

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,
        }           
    });

}

1 个答案:

答案 0 :(得分:0)

更改if(serie.name !== 'Navigator') {以专注于我想要的系列