Question

我创建了一个包含以下规格的图表：

$('#container').highcharts('StockChart', {
        chart: {
            alignTicks: false,
            zoomType: 'x'
        },

        rangeSelector: {
            selected: 5,
            buttons: [
                {
                    type: 'minute',
                    count: 1,
                    text: '1m'
                }, {
                    type: 'minute',
                    count: 10,
                    text: '10m'
                }, {
                    type: 'minute',
                    count: 30,
                    text: '30m'
                }, {
                    type: 'minute',
                    count: 60,
                    text: '1h'
                }, {
                    type: 'day',
                    count: 1,
                    text: '1d'
                }, {
                    type: 'all',
                    text: 'All'
                }
            ]
        },

        title: {
            text: 'Ping RTT over time for: ' + host
        },
        subtitle: {
            text: document.ontouchstart === undefined ?
                'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in'
        },
        xAxis: {
            type: 'datetime',
            events: {
                setExtremes: setExtremesCallback
            }
        },
        yAxis: {
            title: {
                text: 'Ping RTT (ms)'
            }
        },
        legend: {
            enabled: false
        },
        plotOptions: {
            column: {
                color: Highcharts.getOptions().colors[c]
            },
            series: {
                dataGrouping: {
                    approximation: "average"
                }
            }
        },
        series: [{
            type: 'column',
            name: 'Ping RTT',
            data: h,
        }]
    });

然后我将setExtreme回调定义如下：

function setExtremeCallback(event) {
    var min = event.min;
    var max = event.max;
    var container = event.target.chart.renderTo
    ...
}

在这个函数中，我想计算一些关于所选范围内数据部分的统计数据。为此，我需要min和max，我能够从event对象中捕获它们。问题是无法访问data数组。我试过

var data = event.target.chart.series[0].data

或

var data = this.series[0].data

但他们都是空的。

Answer 1

我以这种方式解决了这个问题，但我很确定有更清洁的方法可以做到这一点。

function setExtremeCallback(event) {
    var minPos = 0;
    var maxPos = this.series[0].xData.length - 1;
    for (var j = 0; j < this.series[0].xData.length; j++) {
        if (this.series[0].xData[j] <= event.min)
            minPos = j;
        if (this.series[0].xData[j] <= event.max)
            maxPos = j;
    }
    var yData = this.series[0].yData.slice(minPos, maxPos);
    ...
}

Highstock Chart - 缺少setExtremes事件数据

1 个答案: