Highcharts Overlapping datetime Columns При использовании addPoint

Question

Я пытаюсь динамически добавлять данные в таблицу столбцов с осью X datetime, используя addPoint().

Когда я это делаю, во многих случаях столбцы начинают перекрываться друг с другом. Визуально, похоже, что ширина столбцов не обновляется должным образом.

Вот jsfiddle, который демонстрирует проблему:

http://jsfiddle.net/AkKqP/6/

Вот соответствующий код:

var d_t[ 10, 8, 13 ]; 
var cur=0; 
$(function() { 
    $('#container').highcharts({ 
     chart: { 
      type: "column" 
     }, 
     series: [{ 
      data: [ ] 
     }], 
     xAxis: { 
      type: "datetime" 
     } 
    }); 
    // the button action 
    $('#button').click(function() { 
     var chart = $('#container').highcharts(); 
     var msec = Date.UTC(2013, 3, d_t[cur]); 
     chart.series[0].addPoint([msec, 10]); 
     cur++; 
     cur = (cur >= 4) ? 3 : cur; 
    }); 
}); 

Я жестко закодированные четыре даты, которые вызывают проблемы появляются.

Если вы нажмете кнопку «Добавить точку» 4 раза, вы увидите добавленные данные и странное поведение странных ширины столбцов (они кажутся слишком узкими) во втором добавлении и перекрывающиеся столбцы третьего и четвертого добавления.

Обходным способом является предоставление дат графика в отсортированном порядке. Затем диаграмма рисуется правильно. Или, может быть, это требуется?

У меня, вероятно, отсутствует что-то очевидное, но я искал вокруг и немного поигрался и не смог понять это. Любые предложения будут высоко ценится.

Answer 1

В Highcharts данные для xAxis следует сортировать по возрастанию. Посмотрите: http://jsfiddle.net/AkKqP/8/