Невозможно правильно построить ось X в HighChart

Question

Я новичок в highChart, и даже после выполнения документации я не могу правильно построить ось x. Он только маркирует первый элемент массива dateAndTimeArray. Можете ли вы сказать мне, где я делаю ошибку. Вот мой код.

JSON массив

var jsonObj=[ { 
    name:"Nov-10 18:00", 
    data:[50], 
    type:'column' 
}, 
      { 
    name:"Nov-20 20:00", 
    data:[60], 
    type:'column' 
}, 
      { 
    name:"Nov-10 22:00", 
    data:[70], 
    type:'column' 
}, 
      { 
    name:"Nov-12 20:00", 
    data:[80], 
    type:'column' 
}] 

HighChart код относящийся

dateAndTimeArray = ['Nov-15 18:00', 'Nov-20 20:00', 'Nov-11 22:00', 'Nov-12 20:00']; 

    var seriesData=jsonObj; 
console.log(seriesData); 
    $('#container').highcharts({ 
     chart: { 
      zoomType: 'xy', 
      spacingRight: 10 
     }, 
     credits: { 
      enabled: false 
     }, 
     title: { 
      text: '' 
     }, 
     xAxis: { 
      type: 'datetime', 
      labels: { 
       overflow: 'justify' 
      }, 
      startOnTick: true, 
      showFirstLabel: true, 
      endOnTick: true, 
      showLastLabel: true, 
      categories: dateAndTimeArray, 
      tickInterval: 00, 
      labels: { 
       formatter: function() { 
        return this.value.toString().substring(0, 6); 
       }, 
       rotation: 0.1, 
       align: 'left', 
       step: 10, 
       enabled: true 
      }, 
      style: { 
       fontSize: '8px' 
      } 
     }, 
     yAxis: { 
      title: { 
       text: 'Measurement value' 
      } 
     }, 
     tooltip: { 
      xDateFormat: '%Y-%m-%d %H:%M', 
      shared: true 
     }, 
     legend: { 
      enabled: false 
     }, 
     plotOptions: { 
      area: { 
       fillColor: { 
        linearGradient: { 
         x1: 0, 
         y1: 0, 
         x2: 0, 
         y2: 1 
        }, 
        stops: [ 
         [0, Highcharts.getOptions().colors[0]], 
         [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')] 
        ] 
       }, 
       lineWidth: 1, 
       marker: { 
        enabled: false 
       }, 
       shadow: false, 
       states: { 
        hover: { 
         lineWidth: 1 
        } 
       }, 
       // threshold: null 
      } 
     }, 
     series:jsonObj 


    }); 

DEMO

Answer 1

Диаграмма черчения, что вы просили его. У вас есть 4 серии данных. Каждая серия имеет одну точку данных. Я думаю, вы путаете series.name и точку xAxis. Поскольку каждая из ваших серий имеет только одну точку, она присваивается первой категории в вашем xAxis.categories.

Вопрос тогда будет: Вы хотите иметь категориальный xAxis или datetime xAxis?

Ваши данные приводят к категоризации, но ваш xAxis.categories не соответствует вашим series.name элементам, а ваш xAxis.categories не в порядке возрастания времени. Вы также устанавливаете категориальный список элементов, но указываете на высокие диаграммы, что ваш график равен type: 'datetime'. Вам нужно выбрать один.

Here - пример использования категориального типа.

Here - пример, использующий тип даты и времени.