如何删除HighCharts条形图中条形图之间的空格?

如何删除HighCharts条形图中条形图之间的空格?,highcharts,bar-chart,react-highcharts,Highcharts,Bar Chart,React Highcharts,我想用海图做一个简单的条形图 我想把栅栏之间的空隙去掉。我的研究使我相信groundPadding和pointPadding属性是造成这个空间的原因。但是将两者设置为0并没有改变任何事情 const config = { chart: { type: 'bar', spacingTop: 0, spacingRight: 0, spacingBottom: 0, spacingLeft: 0,

我想用海图做一个简单的条形图

我想把栅栏之间的空隙去掉。我的研究使我相信
groundPadding
pointPadding
属性是造成这个空间的原因。但是将两者设置为
0
并没有改变任何事情

const config = {
      chart: {
        type: 'bar',
        spacingTop: 0,
        spacingRight: 0,
        spacingBottom: 0,
        spacingLeft: 0,
        // marginTop: 0,
        // marginRight: 0,
        // marginBottom: 0,
        // marginLeft: 0
      },
      title: {
        text: null
      },
      legend: {
        enabled: false
      },
      credits: {
        text: ''
      },
      xAxis: {
        categories: options.map(option => option.option),
        // lineWidth: 0,
        // tickWidth: 0,
      },
      yAxis: {
        title: {
          enabled: false,
        },
        gridLineWidth: 0,
        tickAmount: 0,
        showFirstLabel: false,
        showLastLabel: false
      },
      series: [{
        data: options.map(option => option.votes)
      }],
      plotOptions: {
        bar: {
          dataLabels: {
            enabled: true
          }
        },
        series: {
          pointWidth: 20,
          groundPadding: 0,
          pointPadding: 0
        }
      }
    };
有什么想法吗

编辑:

不确定是否相关,但包装我的图表的红色
div
是:

<div style={{ width: '100%', height: '100%', margin: 'auto', border: '2px solid red' }}>
    <ReactHighCharts config={config}></ReactHighCharts>
</div>

绿色的
div
具有尺寸:
宽度:350px
高度:400px


演示:

groundPadding
pointPadding
将位于
内,而不是
系列

plotOptions: {
  bar: {
    groupPadding: 0,
    pointPadding: 0,
    dataLabels: {
      enabled: true,
    }
  }
},

您的代码有错误。您设置了
groundPadding
,而不是
groupPadding
。此外,如果使用
点填充
组填充
,则在它们之前设置
点宽度
将不会生效,因为
点宽度
是基于这两个参数计算的。如果要为所有点设置一个宽度,请仅设置
pointWidth
属性。至于每次添加另一个点时增加图表的高度,您可以使用
chart.setSize
功能检查加载事件的点数并适当更改图表大小。看看下面的例子

API参考:

示例:

我试过了,但没用。你认为这是因为包裹它的div的尺寸吗?(如果是这样的话,我添加了一个编辑)添加实时示例或编辑我的示例以显示您面临的错误此处进行了演示:我认为错误是由于
pointWidth:20,
串联打印选项造成的。删除它,它就会工作。我看到了演示,但我试图实现的是,无论我在xAxis上有多少个类别,都要设置一个栏宽。图表的高度会变长,这取决于我有多少条线。我该怎么做?