Highcharts：酒吧内的一个堆积酒吧 [英] Highcharts: Bar inside of a stacked bar

问题描述

我想创建一个带有条形图的条形图，如图所示。
图表http://i61.tinypic.com/317axx4.jpg p>

我设法将列放在列的内部，但是，我无法使其适用于该栏。我怎么能把酒吧里面的堆栈吧？

我的代码 - JsFiddle

  var chart = new Highcharts.Chart（{
 chart ：{
 renderTo：'container'，
}，
 title：{
 text：'Test％'
}，
 xAxis：{
类别：['2014'，'2013'，'2012'，'2011'] 
}，
 yAxis：{
相反：true，
 labels：{
格式：'{value}％'，
}，
}，
 plotOptions：{
系列：{
堆栈：'正常'
 $，
列：{
堆积：'percent'
} 
}，
图例：{
启用：false 
}， 
系列：[{
名称：'red'，
类型：'bar'，
数据：[70，70，70，70]，
颜色： 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：{
启用：true，
格式：'{y}％'
}，
}] 
}）; 
  

任何帮助表示感谢。

解决方案

您可以将分组设置为false，因此所有堆叠都将相互重叠 - 彼此重叠。

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

  plotOptions：{
 series：{
 grouping：false 
 ... 
  

API参考： plotOptions.bar .grouping

I want to create a chart with a bar inside of a stacked bar as seen on the image bellow. Chart http://i61.tinypic.com/317axx4.jpg

I managed to put the column inside of the column but, I can't make it work for the bar. How can I put the bar inside of the stacked bar?

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}%'
        },
    }]
});

Any help appreciated.

解决方案

You could set grouping to false, so all stacks will be placed on top of each other - overlap each other.

Example: http://jsfiddle.net/zs6juetp/2/

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

API reference: plotOptions.bar.grouping

这篇关于Highcharts：酒吧内的一个堆积酒吧的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！