Highcharts

Question

我找到了关于如何组合图表、叠加它们的教程和答案，但是 none 同时找到了这两种图表。

这是我的意思的图片：

我尝试了一些东西，这是我到目前为止所做的：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]
        }]
    });
});

所以我面临的问题是将它们居中，以便它们都适合。例如，我尝试 "pointPlacement: -0.2" 到 3 个图表，但没有改变它们的位置

感谢您的帮助。

Answer 1

您与 grouping 关系密切。您可以通过将所有系列的 grouping 设置为 false 并通过减少该系列的 point padding 来使未堆叠的系列更宽，从而使它看起来像您想要的那样。像这样：

    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>

工作示例： http://jsfiddle.net/ewolden/8vCEs/48/

Answer 2

你不需要玩 pointPlacement，这里是你需要的配置：http://jsfiddle.net/8vCEs/50/

简短说明：

series.grouping 使条形图居中
series.pointPadding 更改列宽
series.stack 决定哪个系列应该叠加

片段：

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

Highcharts - 合并和叠加列

Highcharts - Combine & superimpose columns

javascript

jquery

charts

center