Highcharts tickInterval каждый час

Question

Я пытаюсь отобразить данные, сгруппированные в столбцы как несколько рядов. Существуют три основных требования:

• график должен начать (нулевую точку на оси X) с FromDate
• должен быть «тик» на каждый час
• Todate является гибким

До сих пор кажется, что tickInterval очень зависит от предоставленных данных, и Highchart игнорирует его в некоторых случаях, например, ниже. Есть ли способ сделать это пометки в моем сценарии? Можно ли добавлять тики, даже если данных нет?

$('#container').highcharts({ 
    global: { 
     useUTC: false 
    }, 
    chart: { 
      zoomType: false, 
      type: 'column' 
     }, 
    xAxis: { 
     type: 'datetime', 
     ordinal: false, 
     startOnTick: false, 
     endOnTick: false, 
     minPadding: 0, 
     maxPadding: 0, 
     tickInterval: 3600 * 1000, 
     minTickInterval: 3600 * 1000 
    }, 

    plotOptions: { 
     column: { 
      stacking: 'normal', 
      column: { 
       pointPadding: 0, 
       borderWidth: 0, 
       grouping: true 
      } 
     } 
    }, 
    series: [{"name":"One","data":[[1.424304e+12,1],[1.4243076e+12,2],[1.4243148e+12,1],[1.4243301e+12,1],[1.4243364e+12,1],[1.4243436e+12,1],[1.4243472e+12,1],[1.4243526e+12,1],[1.4243535e+12,1],[1.4243544e+12,1],[1.4243625e+12,1],[1.4243652e+12,2],[1.424367e+12,1],[1.4243688e+12,8],[1.4243724e+12,3],[1.4243733e+12,1],[1.424376e+12,8],[1.4243814e+12,3],[1.4243841e+12,1]]},{"name":"Two","data":[[1.424304e+12,1],[1.4243112e+12,1],[1.4243292e+12,1],[1.4243436e+12,1],[1.4243616e+12,1],[1.4243652e+12,3],[1.4243724e+12,1],[1.4243868e+12,1]]},{"name":"Seven","data":[[1.4243706e+12,1],[1.4243814e+12,1]]}] 
}); 

Ссылка на Fiddle

Answer 1

У вас нерегулярный интервал между точками, поэтому Highcharts не может действительно рассчитать правильное расстояние между точками. Это вызывает проблему с интервалом на xAxis - обходным путем является установка pointRange, например, 1/10 часа: jsfiddle.net/qn6romsf/7 - если вы не можете установить pointRange, попробуйте использовать tickPositioner.

Answer 2

Официальный демо: http://www.highcharts.com/demo/dynamic-update.

Возможно, мой образец поможет вам. Логика следующая: 1) отправлять ajax для извлечения данных каждую минуту (60 элементов) 2) выталкивать из этого списка один элемент в серию 3), поэтому диаграмма обновляется каждую секунду.

function getLoadApp(){ 
    var d; 
    var ar=[]; 
    for(var i=0; i<60; i++){ 
     ar[i] = 0; 
    } 

    $.ajax({ 
     type: "POST", 
     url: "./dashboard", 
     async: false, 
     data: { 
      ajax: true, 
      oper: "loadapp" 
     }, 
     success: function(data) { 
      d = jQuery.parseJSON(data); 
      for(var i=0; i<d.length; i++){ 
       ar[Number(d[i].SEC)] = Number(d[i].COUNT); 
      } 
      loadappOneMin = loadappOneMin.concat(ar); 
     } 
    }); 
} 

getLoadApp(); 
    $('#loadapp').highcharts({ 
     lang: { 
      noData : "На данный момент данные отсутствуют" 
     }, 
     chart: { 
      type: 'spline', 
      animation: Highcharts.svg, // don't animate in old IE 
      marginRight: 10, 
      borderWidth: 1, 
      borderRadius: 4, 
      borderColor: '#E8E8E8', 
      events: { 
       load: function() { 
        // set up the updating of the chart each second 
        var series = this.series[0]; 

        //каждую сек выталкиваем 1ый из списка 
        setInterval(function() { 
         loadappOneSec = loadappOneMin.shift(); 
         if(! loadappOneSec){ 
           loadappOneSec = 0; 
         }; 
         d = new Date(); 
         var x = d.getTime(); 
         series.addPoint([x, loadappOneSec], true, true); 
        }, timeInterval); 
        //каждую мин обн.-ем список 
        setInterval('getLoadApp()', 60*timeInterval);  
       } 
      } 
     }, 
     title: { 
      text: 'ПТК АЦСК' 
     }, 
     xAxis: { 
      type: 'datetime', 
      tickPixelInterval: pixelInterval 
     }, 
     yAxis: { 
      min: 0, 
      title: { 
       text: 'запросов/сек.' 
      }, 
      plotLines: [{ 
        value: 0, 
        width: 1, 
        color: '#808080' 
       }] 
     }, 
     tooltip: { 
      formatter: function() { 
       return Highcharts.numberFormat(this.y, 0); 
      } 
     }, 
     legend: { 
      enabled: false 
     }, 
     exporting: { 
      enabled: false 
     }, 
     plotOptions: { 
      area: { 
       pointStart: 0, 
       marker: { 
        enabled: false, 
        symbol: 'circle', 
        radius: 2, 
        states: { 
         hover: { 
          enabled: true 
         } 
        } 
       } 
      } 
     }, 
     series: [{ 
       data: (function() { 
        var data = [], time = (new Date()).getTime(), i; 
        for (i = -19; i <= 0; i++) { 
         data.push({ 
          x: time + i * 1000, 
          y: loadappOneSec 
         }); 
        } 
        return data; 
       })() 
      }] 
    });