Highcharts - 组合和叠加列答案

【问题标题】：Highcharts - Combine & superimpose columnsHighcharts - 组合和叠加列
【发布时间】：2019-02-25 17:36:00
【问题描述】：

我找到了有关如何组合图表、叠加图表的教程和答案，但没有同时找到两者。

这是我的意思的图片：

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

所以我面临的问题是让它们居中，使它们融合在一起。我尝试了 3 个图表的示例“pointPlacement：-0.2”，但没有改变它们的位置

感谢您的帮助。

【问题讨论】：

标签： javascript jquery charts highcharts center

【解决方案1】：

你不需要玩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]
  }]
});

【讨论】：

【解决方案2】：

您与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/

【讨论】：