高架图组合图表与堆积的列

Question

我正在尝试使用列和堆积图表来实现汇总图表。

完全像他们在演示部分中的那个。但是，我希望在此示例中显示堆积柱形图而不是饼图。 Highcart combination chart example demo

[this is not a link]https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/combo/

感谢您的建议。

Answer 1

您可以通过添加链接到它们的第二个轴和堆叠列系列来实现它。系列应具有零点以在右侧创建偏移。检查下面发布的示例。

码：

var defaultColumnSeries = {
  type: 'column',
  stacking: 'normal',
  dataLabels: {
    enabled: true,
    style: {
      fontSize: '9px'
    }
  },
  showInLegend: false,
  groupPadding: 0.1,
  yAxis: 1,
  xAxis: 1
}

Highcharts.chart('container', {
  title: {
    text: 'Combination chart'
  },
  xAxis: [{
    categories: ['Apples', 'Oranges', 'Pears', 'Bananas', 'Plums']
  }, {
    categories: ['Apples', 'Oranges', 'Pears', 'Bananas', 'Plums'],
    visible: false
  }],
  yAxis: [{

  }, {
    top: 30,
    height: 150,
    visible: false,
    stackLabels: {
      enabled: true,
      style: {
        fontWeight: 'bold',
        color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
      }
    }
  }],
  labels: {
    items: [{
      html: 'Total fruit consumption',
      style: {
        left: '20px',
        top: '-20px',
        color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
      }
    }]
  },
  series: [{
    type: 'column',
    name: 'Jane',
    data: [3, 2, 1, 3, 4]
  }, {
    type: 'column',
    name: 'John',
    data: [2, 3, 5, 7, 6]
  }, {
    type: 'column',
    name: 'Joe',
    data: [4, 3, 3, 9, 0]
  }, {
    type: 'spline',
    name: 'Average',
    data: [3, 2.67, 3, 6.33, 3.33],
    marker: {
      lineWidth: 2,
      lineColor: Highcharts.getOptions().colors[3],
      fillColor: 'white'
    }
  }, Highcharts.merge(defaultColumnSeries, {
  	data: [4, 3, 2, 6, 3, null, null, null, null, null, null, null, null, null, null, null]
  }), Highcharts.merge(defaultColumnSeries, {
  	data: [1, 4, 7, 3, 2, null, null, null, null, null, null, null, null, null, null, null]
  }), Highcharts.merge(defaultColumnSeries, {
  	data: [5, 2, 1, 3, 4, null, null, null, null, null, null, null, null, null, null, null]
  })]
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

演示：

• https://jsfiddle.net/BlackLabel/jy02qsru/1/