如何调整条形图之间的间距[Highcharts.js]

omqzjyyz  于 2022-11-10  发布在  Highcharts
关注(0)|答案(1)|浏览(186)

我有一个小部件,它是用highcharts.js制作的,我无法控制它的创建。使用.update()方法我需要调整这些条之间的间距。我尝试使用pointPadding:0,组填充:0,但它似乎是工作。改变整个图表的高度有点工作,但解决方案是不灵活的。间距应该是一定的高度(即20px)

bz4sfanl

bz4sfanl1#

根据点数,您可以动态调整图表的高度。例如:

const pointWidth = 20;
let allowChartRedraw = true;

Highcharts.chart('container', {
  chart: {
    events: {
      render: function() {
        if (allowChartRedraw) {
          const pointsAmount = this.series[0].points.length;
          allowChartRedraw = false;
          this.setSize(
            null,
            pointsAmount * pointWidth * 2 + (this.chartHeight - this.plotHeight),
            false
          );
          allowChartRedraw = true;
        }
      }
    }
  },
  series: [{
    type: 'bar',
    pointPadding: 0,
    groupPadding: 0,
    pointWidth,
    data: [...]
  }]
});

现场演示:http://jsfiddle.net/BlackLabel/wfxu36gd/
**API参考:**https:api.highcharts.com/class-reference/Highcharts.Chart#setSize

相关问题