基于隐藏系列的 X 轴范围变化

Question

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

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

Fiddle With Changed Scale and Hidden Data

Fiddle With removed Hidden Data and correct scale

此代码 sn-p 是为了确保在任何给定时间只能显示一个系列。

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 小时，因此它可以确保如果该系列在最后有一个点，它仍然有展示空间。

我不确定是否有任何优雅的方法可以解决此问题，但在您的情况下，有点“黑客”是将所有系列的 pointRange 更改为当前显示的系列。

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

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

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

   $('#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();
       }
   }
   

3. 扩展您的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 了解所有这些更改的结果。 编辑：针对错误的 jsFiddle 更新