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

时间:2018-08-22 12:19:19

标签: javascript highcharts

我正在尝试增加下图中的钢筋高度:

Actual chart

使用pointPaddingpointPlacement将这些条重叠放置。 当我添加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
        }]
    });
});

感谢您的帮助。

1 个答案:

答案 0 :(得分: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