Как построить линию диаграммы с данными серии в высоких диаграммах?

Question

Я пытаюсь создать линейную диаграмму с Highcharts вместе с навигационным управлением, но в моем примере я могу видеть только точки. Пожалуйста, помогите

Мои параметры диаграммы

$('#container').highcharts('StockChart', { 
    chart: { 
     defaultSeriesType: 'line' 
    }, 
    rangeSelector: { 
     selected: 1 
    }, 
    plotOptions: { 
     line: { 
      lineWidth: 10, 
      marker: { 
       enabled: true 
      }, 
      dataLabels: { 
       enabled: true, 
       borderRadius: 5, 
       borderWidth: 1, 
       y: -6, 
       formatter: function() { 
        return this.series.name; 
       } 
      }, 
      states: { 
       hover: { 
        lineWidth: 10 
       } 
      } 
     }, 
     series: { 
      cursor: 'pointer' 
     } 
    }, 
    tooltip: { 
     shared: false, 
     formatter: function() { 
      var str = ''; 
      str += 'Task: ' + this.series.name + '<br>'; 
      str += 'Start Time: ' + this.point.start_time + '<br>'; 
      str += 'End Time: ' + this.point.end_time + '<br>'; 
      str += 'Throughput: ' + this.point.y + '<br>'; 
      return str; 
     } 
    }, 
    series: series 
}); 

Update

Jsfiddle link

Answer 1

Проблема заключается в том, что вы фактическое создание новой серии для каждой точки данных. Таким образом, в настоящее время у вас фактически есть 4 линии с одной точкой в ​​каждой строке. Следовательно, почему вы не видите никаких строк (поскольку строки нуждаются в 2 или более пунктах).

Что вам нужно сделать, это создать единую серию с несколькими точками данных. Что-то вроде этого:

var series = [{ 
    "name": "Territory_Out", 
     "data": [{ 
     "x": 1147651200000, 
      "y": 33.1, 
      "start_time": "14-05-2006 00:00:00", 
      "end_time": "15-05-2006 00:00:00" 
    }, { 
     "x": 1147737600000, 
      "y": 450, 
      "start_time": "15-05-2006 00:00:00", 
      "end_time": "16-05-2006 00:00:00" 
    }, { 
     "x": 1147737600000, 
      "y": 400, 
      "start_time": "15-05-2006 00:00:00", 
      "end_time": "16-05-2006 00:00:00" 
    }, { 
     "x": 1147824000000, 
      "y": 77.67, 
      "start_time": "16-05-2006 00:00:00", 
      "end_time": "17-05-2006 00:00:00" 
    }] 
}];