Highcharts - Combine & superimpose columns

问题

I found tutorials and answers about how to combine charts, superimpose them, but none about both at the same time.

Here is a picture of what I mean:

I tried some stuff, here is what I have done so far : http://jsfiddle.net/8vCEs/37/

var chart;
$(document).ready(function () {
    chart = new Highcharts.Chart({

        chart: {
            renderTo: 'container',
            type: 'column'
        },

        tooltip: {
            shared: false
        },

        plotOptions: {
            column: {
                stacking: 'normal'
            }
        },

        series: [{
            name: '1',
            data: [100],
            grouping: false,

        }, {
            name: '2',
            grouping: true,
            stack: 1,
            data: [30],
        }, {
            name: '3',
            grouping: true,
            stack: 1,
            data: [20]
        }]
    });
});

So the problem Im confront to is to center them so they all fit together. I tried for exemple "pointPlacement: -0.2" to the 3 charts but doesn't change the position of them

Thanks for any help.

回答1:

You don't need to play with pointPlacement, here the config you need: http://jsfiddle.net/8vCEs/50/

Short explanation:

series.grouping to keep bars centered
series.pointPadding to change width of columns
series.stack to decide which series should stack

Snippet:

var chart = new Highcharts.Chart({

  chart: {
    renderTo: 'container',
    type: 'column'
  },

  tooltip: {
    shared: false
  },

  plotOptions: {
    column: {
      grouping: false,
      stacking: 'normal'
    }
  },

  series: [{
    name: '1',
    stack: 0,
    data: [100],

  }, {
    name: '2',
    stack: 1,
    pointPadding: 0.2,
    data: [30],
  }, {
    name: '3',
    stack: 1,
    pointPadding: 0.2,
    data: [20]
  }]
});

回答2:

You were close with the grouping. You can get it to look like you want by setting grouping to false for all series, and making the un-stacked series wider, by reducing the point padding of that series. Like this:

    plotOptions: {
      column: {
        stacking: 'normal',
        grouping: false,
      }
    },
    series: [{
      name: '1',
      data: [100],
      pointPadding: 0.05
    },...
    ]

var chart;
$(document).ready(function () {
    chart = new Highcharts.Chart({

        chart: {
            renderTo: 'container',
            type: 'column'
        },

        tooltip: {
            shared: false
        },

        plotOptions: {
            column: {
                stacking: 'normal',
                grouping: false,
            }
        },
        series: [{
            name: '1',
            data: [100],
            pointPadding: 0.05
        }, {
            name: '2',
            stack: 1,
            data: [30],
        }, {
            name: '3',
            
            stack: 1,
            data: [20]
        }]
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

Working example: http://jsfiddle.net/ewolden/8vCEs/48/

来源：https://stackoverflow.com/questions/52441520/highcharts-combine-superimpose-columns

标签

javascript

jquery

charts

Highcharts

center