同一系列的多列。 Highchart

Question

我希望有一個圖表表示這樣的數據。

該系列代碼將是這樣的。

series: [{ name: 'Car 1', data: [[1, 3], [4, 6], [7, 9]] }, { name: 'Car 2', data: [[2, 3], [8, 10], [12, 18]] }]

每個陣列上的第一個數字將是開始點和第二結束點，以及主陣列內的所有陣列將是對同一行上。

Answer 1

倒置的列圖表應該可以工作。您的數據格式不符合您的需求，但轉換並不困難。如果你沒有使用你顯示的數據格式，你只需要一個x，low和high的點對象。

例如：

{ 
    x: 1, 
    low: 0, 
    high: 4 
} 

以下按摩當前的結構爲正確的格式：

$(function() { 

    var series = [{ 
     name: 'Car 1', 
     data: [ 
      [1, 3], 
      [4, 6], 
      [7, 9] 
     ] 
    }, { 
     name: 'Car 2', 
     data: [ 
      [2, 3], 
      [8, 10], 
      [12, 18] 
     ] 
    }, { 
     name: 'Car 3', 
     data: [ 
      [5, 9], 
      [1, 2] 
     ] 
    }]; 

    // massage the data 
    var data = []; 
    for(var i=0;i<series.length;i++) { 
     for(var j=0;j<series[i].data.length;j++) { 
      data.push({ 
       x: j, 
       low: series[i].data[j][0], 
       high: series[i].data[j][1], 
       name: series[i].name 
      }); 
     } 
    } 

    $('#container').highcharts({ 

     chart: { 
      type: 'columnrange', 
      inverted: true 
     }, 

     plotOptions: { 
      columnrange: { 
       dataLabels: { 
        enabled: false 
       } 
      } 
     }, 
     legend: { 
      enabled: false 
     }, 

     series: [{ 
      name: 'Cars', 
      data: data 
     }] 

    }); 

}); 

http://jsfiddle.net/hqwrx4uy/