javascript - 在 Highcharts 中使用 pointPadding 更改条形宽度

Question

我正在尝试增加下图中的条形高度:

条形图使用 pointPadding 和 pointPlacement 重叠放置。当我添加 pointWidth 时，这些选项将被忽略。

有解决办法吗？

这是我的代码:

$(function () {
    $('#chart').highcharts({
        chart: {
            type: 'bar',
            spacingBottom: 10,
            spacingTop: 20,
            spacingLeft: 15,
            spacingRight: 15
        },
        title: {
            text: 'F',
        },
        xAxis: {
            categories: ['F']
        },
        series: [{
            name: 'M',
            color: 'rgba(220,220,220,0.70)',
            borderColor: '#999999',
            borderRadius: 0,
            data: [4380000.00],
            pointPadding: 0,
            pointPlacement: 0.2
        }, {
            name: 'P',
            color: 'rgba(0,0,0,0.70)',
            borderColor: '#000',
            borderRadius: 0,
            data: [4000000],
            pointPadding: 0.1,
            pointPlacement: 0
        }, {
            name: 'F',
            color: 'rgba(140,255,160,0.90)',
            borderColor: '#339938',
            borderRadius: 0,
            data: [3226923.00],
            pointPadding: 0.2,
            pointPlacement: -0.2
        }]
    });
});

感谢您的帮助。

Answer 1

忘记 pointPadding 并使用 pointWidth 进行操作。

series: [{
  name: 'M',
  color: 'rgba(220,220,220,0.70)',
  borderColor: '#999999',
  borderRadius: 0,
  data: [4380000.00],
  //pointPadding: 0,
  pointPlacement: -0.2,
  pointWidth: 120
}, {
  name: 'P',
  color: 'rgba(0,0,0,0.70)',
  borderColor: '#000',
  borderRadius: 0,
  data: [4000000],
  //pointPadding: 0.1,
  pointPlacement: 0,
  pointWidth: 80
}, {
  name: 'F',
  color: 'rgba(140,255,160,0.90)',
  borderColor: '#339938',
  borderRadius: 0,
  data: [3226923.00],
  //pointPadding: 0.2,
  pointPlacement: 0.2,
  pointWidth: 50
}]

您可以在此处查看结果:jsFiddle