Высокое качество xaxis уменьшается при смене

Question

Я создаю диаграмму и заполняю случайные данные каждые 5 минут. Я установил диапазон данных xAxis в 5 часов, и когда вы начинаете с начальных данных, ширина заполняется графиком, но при непрерывном добавлении точки ширина данных уменьшается. Как сделать, чтобы уменьшить ширину рядов?

У меня есть следующий код:

$(function() { 
    var current_time = (new Date()).getTime()+300000; 
    var now_time = (new Date()).getTime(); 
    var zone_name = ['A','B','C']; 

    $(document).ready(function() { 

     Highcharts.setOptions({ 
      global: { 
       useUTC: false 
      } 
     }); 

     $('#container').highcharts({ 
      chart: { 
       type: 'spline', 
       animation: Highcharts.svg, 
       marginRight: 10, 
       events: { 
        load: function() { 

         var chartsss = $('#container').highcharts(); 

         setInterval(function() { 

         for(var i=0;i<zone_name.length;i++) 
         { 
          var seriessx = chartsss.series[i]; 
          seriessx.addPoint([current_time, Math.random()], false, true); 
          seriessx.addPoint([current_time, Math.random()], false, true); 
         } 

          chartsss.redraw(); 
          current_time += 300000; 

         }, 1000); 
        } 
       } 
      }, 
      plotOptions: { 
       series: { 
        marker: { 
         enabled: false 
        } 
       }, 
       spline: { 
       lineWidth: 2, 
       states: { 
        hover: { 
         lineWidth:3 
        } 
       }, 
       marker: { 
        enabled: false, 
        states: { 
         hover: { 
          enabled: false, 
          symbol: 'circle', 
          fillColor: '#ff0000', 
          radius: 4, 
          lineWidth: 1 
         } 
        } 
       } 
      }, 
      }, 
      title: { 
       text: 'Daily Zone' 
      }, 
      xAxis: { 
       type: 'datetime', 
       dateTimeLabelFormats: { 
        day: '%e of %b', 
        minute: '%H:%M', 
        hour: '%H:%M' 
       }, 
       tickPosition: 'inside', 
       tickInterval: 3600 * 1000, 
       minRange:5 * 3600 * 1000, 
       maxRange:5 * 3600 * 1000 
      }, 
      yAxis: { 
       title: { 
        text: 'Value' 
       }, 
       plotLines: [{ 
        value: 0, 
        width: 1, 
        color: '#808080' 
       }] 
      }, 
      tooltip: { 
       formatter: function() { 
         return '<b>'+ this.series.name +'</b><br/>'+ 
         Highcharts.dateFormat('%H:%M', this.x) +'<br/>'+ 
         Highcharts.numberFormat(this.y, 2); 
       } 
      }, 
      legend: { 
       enabled: true 
      }, 
      exporting: { 
       enabled: false 
      }, 
      series: (function(){ 
       var seriesx = []; 
       for(var i=0;i<zone_name.length;i++) 
       { 
        var datax = []; 
        var time = (new Date()).getTime(); 
        now_time=current_time; 
        for(var j = -59 ;j <= 0;j++) 
        { 
         datax.push({ 
          x: now_time, 
          y: Math.random() 
         }); 
         now_time+=300000; 
        } 
        seriesx.push({ 
         name:zone_name[i], 
         data: datax 
        }); 
       } 
       current_time=now_time; 
       return seriesx; 
      })() 
     }); 
    }); 

}); 

JsFiddle Ссылка: http://jsfiddle.net/jedipalm/YLFhD/4/

изображение при запуске диаграммы: http://i.stack.imgur.com/rE8m3.jpg

изображение, когда постоянно добавлять точки в несколько вторых: http://i.stack.imgur.com/J8GtA.jpg

жалкую за мой плохой английский.

Answer 1

Почему вы добавляете в два раза один и тот же смысл? Highcharts не поддерживает две точки в одной серии с одинаковым значением x. Удалена одна из addPoint() и работает нормально: http://jsfiddle.net/YLFhD/8/

Answer 2

попробовать следующий код:

for(var j = -120 ;j <= 0;j++) 
        { 
         datax.push({ 
          x: now_time, 
          y: Math.random() 
         }); 
         now_time+=300000; 
        } 

http://jsfiddle.net/YLFhD/6/