Изменения диапазона оси X на основе скрытых Серия

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 час, поэтому он гарантирует, что если бы эта серия имела точку в самом конце, у нее все равно было бы место для показа.

Я не уверен, есть ли какой-либо элегантный способ решения этого вопроса, но немного «взломать» в вашем случае - это изменить pointRange всех серий на то, что отображается в данный момент.

Моей сырая реализации этого есть три изменения в код:

1. Вашей серия, которые visible: false по умолчанию также получить pointRange: 1 поэтому они не нарушают диапазон х-ось для единственной видимой серии.

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 Update for bug