Highcharts：堆积条形图内的条形图答案

【问题标题】：Highcharts: Bar inside of a stacked barHighcharts：堆积条形图内的条形图
【发布时间】：2015-09-01 07:52:57
【问题描述】：

我想创建一个图表，其中一个条形图位于堆叠条形图内，如下图所示。

我设法将列放在列内，但是我无法让它对栏起作用。我怎样才能把条放在堆叠条里面？

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

任何帮助表示赞赏。

【问题讨论】：

标签： javascript highcharts bar-chart

【解决方案1】：

您可以将分组设置为 false，因此所有堆栈将被放置在彼此之上 - 彼此重叠。

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

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

API 参考：plotOptions.bar.grouping

【讨论】：

【解决方案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];
};

【讨论】：