Highcharts：酒吧內的一個堆積酒吧

Question

我想創建一個圖表與一個酒吧裏面的一個堆積酒吧在圖像見下圖。 Chart http://i61.tinypic.com/317axx4.jpg

我設法把列放在列的內部，但是，我不能讓它工作的酒吧。我怎樣才能把酒吧裏面的堆積酒吧？

My code - JsFiddle

var chart = new Highcharts.Chart({ 
    chart: { 
     renderTo:'container', 
    }, 
    title: { 
     text: 'Test %' 
    }, 
    xAxis: { 
     categories: ['2014', '2013', '2012', '2011'] 
    }, 
    yAxis: { 
     opposite: true, 
     labels: { 
      format: '{value}%', 
     }, 
    }, 
    plotOptions: { 
     series: { 
      stacking: 'normal' 
     }, 
     column: { 
      stacking: 'percent' 
     } 
    }, 
    legend: { 
     enabled: false 
    }, 
    series: [{ 
     name: 'red', 
     type: 'bar', 
     data: [70, 70, 70, 70], 
     color: 'rgba(253, 155, 155, 1)', 
     pointPadding: 0.1, 
     pointPlacement: -0.2, 
     stack: 'bar' 
    }, { 
     name: 'yellow', 
     type: 'bar', 
     data: [5, 5, 5, 5], 
     color: 'rgba(255, 255, 153, 1)', 
     pointPadding: 0.1, 
     pointPlacement: -0.2, 
     stack: 'bar' 
    }, { 
     name: 'green', 
     type: 'bar', 
     data: [25, 25, 25, 25], 
     color: 'rgba(204, 255, 153, 1)', 
     pointPadding: 0.1, 
     pointPlacement: -0.2, 
     stack: 'bar' 
    }, { 
     name: 'Value', 
     type: 'bar', 
     data: [35, 30, 25, 20], 
     color: 'rgba(126,86,134,.9)', 
     pointPadding: 0.35, 
     pointPlacement: -0.2, 
     dataLabels: { 
      enabled: true, 
      format: '{y}%' 
     }, 
    }] 
}); 

讚賞任何幫助。

Answer 1

您可以將分組設置爲false，因此所有堆疊都將放置在彼此之上 - 彼此重疊。

例子：http://jsfiddle.net/zs6juetp/2/

plotOptions: { 
    series: { 
     grouping: false 
     ... 

API參考：plotOptions.bar.grouping

Answer 2

它看起來像你正在做一個項目符號圖形。

我有這樣的例子在這裏：

• http://jsfiddle.net/jlbriggs/UGs2E/17/

。

plotOptions:{ 
     bar:{ 
      grouping: false, 
      shadow:false, 
      borderWidth:0, 
      pointPadding:.25, 
      groupPadding:0 
     }, 
     scatter:{ 
      marker:{ 
       symbol:'line', 
       lineWidth:3, 
       radius:9, 
       lineColor:'#333' 
      } 
     } 
    } 

也使用函數來擴展標記對象爲目標線，在一個散射系列：

Highcharts.Renderer.prototype.symbols.line = function(x, y, width, height) { 
    return ['M',x ,y + width/2,'L',x+height,y + width/2]; 
};