如何獲取堆疊柱狀圖中每列的不同顏色

Question

我試圖做一個堆積百分比柱狀圖，但是我卡在佈局中。

下面的第一張照片顯示了我試圖用不同的顏色爲每一列實現。

上面的第二畫面示出了我設法做到圖表。

Answer 1

您可以像這樣分配每個單獨條的顏色：{y: 30, color:'green'}。這在非3D圖形中是相同的，因爲它是3D圖形，不同之處在於，當它是3D時，它會對整個酒吧進行着色，因此在頂部和側面會丟失可區分的着色。在我看來，看起來更好的是讓它成爲非3D。

但無論如何，我創造了什麼，你所希望看到的：

使用下面的代碼：

$('#container').highcharts({ 

     chart: { 
      type: 'column', 
      options3d: { 
       enabled: true, 
       alpha: 15, 
       beta: 15, 
       viewDistance: 30, 
       depth: 40 
      } 
     }, 
     xAxis: { 
      categories: ['A', 'B', 'C', 'D'] 
     }, 
     yAxis: { 
      labels: { 
       formatter: function(){ 
       return 100 * this.value/$(this.axis.tickPositions).last()[0] + '%'; 
       } 
      } 
     }, 
     legend:{ 
      enabled:false 
     }, 
     plotOptions: { 
      column: { 
       stacking: 'percent', 
       depth:30, 
       dataLabels: { 
        enabled: true, 
        color: 'white', 
        style: { 
         textShadow: '0 0 3px black' 
        } 
       } 
      } 
     }, 

     series: [{ 
      index: 1, 
      data: [ 
       {y: 30, color:'green'}, 
       {y: 20, color: 'blue'}, 
       {y: 18, color: 'red'}, 
       {y: 17, color: 'black'} 
       ] 
      }, { 
      index: 2, 
      data: [ 
       {y: 70, color:'lightgreen'}, 
       {y: 80, color: 'lightblue'}, 
       {y: 82, color: 'pink'}, 
       {y: 83, color: 'lightgray'} 
      ] 
     }] 
    }); 
}); 

JSFiddle