Javascript 减少海图中堆叠条形图之间的空间

我在Highchart中创建了堆叠列

我使用了

pointWidth:50

来减小列栏的宽度，但堆叠栏之间的空间太大了

如何减少堆叠钢筋之间的空间

[最新问题]

我还想在图例中显示堆栈名称，用户可以单击堆栈名称在图表中隐藏堆栈。可能吗

这里是我的源代码：

JSFIDLE链路

Highcharts.chart（'container'{
图表：{
类型：“列”
},
标题：{
文本：“堆叠柱形图”
},
xAxis：{
类别：['A'，'B'，'C'，'D'，'E']
},
亚克斯：{
分:0,，
标题：{
正文：“水果总消费量”
},
堆叠标签：{
启用：对，
风格：{
fontWeight:'粗体'，
颜色：（//主题
Highcharts.defaultOptions.title.style&&
Highcharts.defaultOptions.title.style.color
)| |“灰色”
}
}
},
图例：{
对齐：'居中'，
x:0,，
垂直排列：“底部”，
y:5，
背景颜色：
Highcharts.defaultOptions.legend.backgroundColor | | |“白色”，
边框颜色：“#CCC”，
边框宽度：0，
影子：错
},
工具提示：{
headerFormat:“{point.x}
”，
pointFormat:“{series.name}:{point.y}
总计：{point.stackTotal}”
},
打印选项：{
专栏：{
堆叠：“正常”，
数据标签：{
已启用：true
}
},
系列：{
//堆叠：“正常”，
数据标签：{
格式化程序：函数（）{
console.log（this）；
返回this.series.name；
},
启用：对，
//allowOverlap：是的，
//对齐：“右”，
颜色：“#fff”，
影子：错，
//x:-50，
风格：{
字体大小：“8px”，
textShadow：“0px”
}
},
//点填充：0.1，
点宽度：50，
分组填充：0，
堆叠：“正常”，
//colorByPoint：对，
//showInLegend:false
}
},
系列：[{
名称：'组件'，
数据：[[0,5]，[1,3]，[2,4]，[3,7]，[4,3]，
堆栈：“预测”
}, {
名称：'模块'，
数据：[[0,2]，[1,2]，[2,3]，[3,2]，[4,2]，
堆栈：“预测”
},
{
名称：'董事会'，
数据：[3,5,5,3,2]，
堆栈：“预测”
},
{
名称：'组件'，
数据：[6,4,5,8,4]，
斯塔克：“真的”
}, {
名称：'模块'，
数据：[3,3,4,3,3]，
斯塔克：“真的”
},
{
名称：'董事会'，
数据：[4,6,6,4,3]，
斯塔克：“真的”
}
]
});
您可以将
groupPadding
设置为更高的值，从而将组中的列一起移动。请注意，对pointWidth使用固定值会干扰图表响应度，但您可以使用响应规则为特定图表宽度自定义这些值：

演示：

API:


编辑：

要创建堆栈图例项，您需要添加一个没有数据的系列（创建图例按钮），并使用legendItemClick回调自定义按钮功能

演示：

请注意，当堆栈被隐藏并且用户将单击隐藏堆栈中的特定序列图例项时，此解决方案可能无法完美工作

一旦我研究了一个非常复杂的例子。如果你想知道，你可以在这里探讨这个话题：
你好，塞巴斯蒂安，你能帮我回答最新的问题吗？我还想在图例中显示堆栈名称，用户可以单击堆栈名称在图表中隐藏堆栈。可以吗？我可以根据系列数据的数量自定义点宽度吗？如果序列数据返回大约10个值，列是重叠的，我想减少点宽度，如果序列数据发生变化，可以使用chart.update功能在加载回调内部实现。见：API:API:
  plotOptions: {
    column: {
      stacking: 'normal',
    },
    series: {
      //stacking: 'normal',
      dataLabels: {
        formatter: function() {
          console.log(this);
          return this.series.name;
        },
        enabled: true,
        //allowOverlap: true,
        //align: 'right',
        color: '#fff',
        shadow: false,
        //x:-50,
        style: {
          fontSize: "8px",
          textShadow: "0px"
        }
      },
      //pointPadding: 0,
      pointWidth: 50,
      groupPadding: 0.2,
      stacking: 'normal',
      //colorByPoint: true,
      //showInLegend: false
    }
  },