在高圖中繪製同一圖表上的多個列

Question

我想繪製在同一個圖表上的多個列圖形，堆疊在一起。 This is an example of desired output.

每個彩色列段代表在給定月份結束時已達到給定水平的團隊的百分比。所以就像4個獨立的柱狀圖一樣堆疊起來。我認爲這是不同的分組和堆疊，但可能是錯誤的。

感謝您的任何反饋意見。

Answer 1

這可以通過疊加和列範圍的組合來完成。有幾點需要注意的是，您必須爲yAxis設置一個類別，這會對您設置系列數據值的方式造成一些困擾。我選擇了一種方法，我確信還有其他方法。我所做的是首先將圖表類型'columnrange'：

chart: { 
    type: 'columnrange' 
}, 

然後，我設置了yAxis屬性，使用類別：

yAxis: { 
    categories: ['Level 0', 'Level 1', 'Level 2', 'Level 3'], 

由於類別的偏移量在中間的刻度標記軸的我刪除它們，並設置初始位置不上打鉤：

startOnTick: false, 
    min: .5, 
    gridLineWidth: 0, 

接下我必須設置格式（基本上只是隱藏了第一個標籤）：

labels: { 
    formatter: function() { 
     var label = this.axis.defaultLabelFormatter.call(this); 
     if (!this.isFirst) { 
     return label; 
     } 
    } 
    }, 

現在，我創建plotLines模仿網格線與上一個不同的顏色來表示「目標」：

plotLines: [{ 
    color: '#e6e6e6', 
    width: 1, 
    value: 1 
    }, { 
    color: '#e6e6e6', 
    width: 1, 
    value: 2 
    }, { 
    color: 'red', 
    width: 2, 
    value: 3, 
    label: { 
     text: 'Target' 
    } 
    }] 

現在我設置了該圖表爲plotOptions。需要注意的是stacking參數沒有在API中列出的作爲是columnrange型的一部分，但它仍然功能（如使用V5.0這個答案）：

plotOptions: { 
    columnrange: { 
    stacking: true 
    } 
}, 

好，幾乎沒有。然後我設置的系列數據：

series: [{ 
    name: 's1', 
    data: [ 
    [0, .64], 
    [0, .9], 
    [0, 1] 
    ] 
}, { 
    name: 's2', 
    data: [ 
    [null, null], 
    [1, 1.1], 
    [1.0, 1.5] 
    ] 
}, { 
    name: 's3', 
    data: [ 
    [null, null], 
    [null, null], 
    [2.0, 2.5] 
    ] 
}] 

數據值的最重要的部分是，每一個「水平」是一個整體的整數，使得第1級是從0到1級和2級爲1至2和等級3是從2到3.當你嘗試確定你每個月的每個級別的百分比時，這個結果很好，因爲它們仍然是統一的增量。

我沒有修改工具提示，因爲你沒有給出任何規格。

樣品jsFiddle和全碼：

$(function() { 
    Highcharts.chart('container', { 
    chart: { 
     type: 'columnrange' 
    }, 
    xAxis: { 
     categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
    }, 
    yAxis: { 
     categories: ['Level 0', 'Level 1', 'Level 2', 'Level 3'], 
     startOnTick: false, 
     min: .5, 
     gridLineWidth: 0, 
     title: { 
     text: null 
     }, 
     labels: { 
     formatter: function() { 
      var label = this.axis.defaultLabelFormatter.call(this); 
      if (!this.isFirst) { 
      return label; 
      } 
     } 
     }, 
     plotLines: [{ 
     color: '#e6e6e6', 
     width: 1, 
     value: 1 
     }, { 
     color: '#e6e6e6', 
     width: 1, 
     value: 2 
     }, { 
     color: 'red', 
     width: 2, 
     value: 3, 
     label: { 
      text: 'Target' 
     } 
     }] 
    }, 
    plotOptions: { 
     columnrange: { 
     stacking: true 
     } 
    }, 
    legend: { 
     enabled: true 
    }, 
    series: [{ 
     name: 's1', 
     data: [ 
     [0, .64], 
     [0, .9], 
     [0, 1] 
     ] 
    }, { 
     name: 's2', 
     data: [ 
     [null, null], 
     [1, 1.1], 
     [1.0, 1.5] 
     ] 
    }, { 
     name: 's3', 
     data: [ 
     [null, null], 
     [null, null], 
     [2.0, 2.5] 
     ] 
    }] 
    }); 
});