X轴范围根据隐藏的Series变化

Question

我在一张图表上有 2 个系列。一次只能显示一个系列，但隐藏的图形会影响 x 轴上的范围。

数据是通过 PHP 动态生成的，但这里有 2 个小提琴来说明我的意思：

Fiddle With Changed Scale and Hidden Data

Fiddle With removed Hidden Data and correct scale

此代码段用于确保在任何给定时间只能显示一个系列。

events: {
    show: function () {
        var chart = this.chart,
            series = chart.series,
            i = series.length,
            otherSeries;
            var seriesName = this['options']['name'];
            chart.yAxis[0].axisTitle.attr({
                text: seriesName
            });

        while (i--) {
            otherSeries = series[i];
            if (otherSeries != this && otherSeries.visible) {
                otherSeries.hide();
            }
        }
    }

我不确定为什么包含隐藏数据的图表会显示到 16:00，但没有任何其他数据的图表会显示到 15:38

的最后一个数据点

Answer 1

似乎 Highcharts 正在考虑具有最大 pointRange 的系列的 pointRange（尽管它被隐藏）并基于此显示 x 轴。您的 "Calls/Hour" 系列的范围是 1 小时，因此它确保如果该系列在最后有一个点，它仍然有显示的空间。

我不确定是否有任何优雅的方法可以解决这个问题，但在您的情况下 "hack" 是将所有系列的 pointRange 更改为当前显示的系列一.

我的粗略实现对您的代码进行了三处更改：

默认情况下 visible: false 的系列也会得到 pointRange: 1，因此它们不会破坏唯一可见系列的 x 轴范围。

创建图表后，我们会存储每个系列的正确点范围以供将来参考，例如使用回调函数：

$('#callFrequencyGraph').highcharts({
    // Options...
}, function(event) {
    var series = this.series;

    // Store the correct point ranges
    for(var i = 0; i < series.length; i++) {
        series[i].update({
            historicalPointRange: (series[i].closestPointRange ? series[i].closestPointRange : 3600000)
        }, false);
        this.redraw();
    }
}

扩展您的 events.legendItemClick 功能以将所有系列 pointRange 更新为点击完成后将显示的系列：

legendItemClick: function() {
    if(this.visible){
         return false;
    }
    else {
        var series = this.chart.series;

        for(var i = 0; i < series.length; i++) {
            series[i].update({ 
                pointRange: this.options.historicalPointRange 
            }, false);
        }
    }
}

有关所有这些更改的结果，请参阅 this updated JSFiddle。编辑：bug

的 jsFiddle 更新

X轴范围根据隐藏的Series变化

X-axis range changes based on hidden Series

javascript

jquery

highcharts