如何删除 HighCharts 条形图中条形之间的空间？答案

【问题标题】：How to remove space in between bars in HighCharts bar chart?如何删除 HighCharts 条形图中条形之间的空间？
【发布时间】：2018-05-06 11:17:50
【问题描述】：

我正在尝试使用 HighCharts 制作一个简单的条形图。

我想删除条之间的空间。我的研究使我相信属性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 的尺寸为：width: 350px 和 height: 400px

演示：https://remove-space-between-bar-hbslv6.stackblitz.io

【问题讨论】：

标签： highcharts bar-chart react-highcharts

【解决方案1】：

groundPadding 和 pointPadding 将在 bar 内部而不是 series

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

Demo

【讨论】：

我试过了，但它什么也没做。你认为这是因为包装它的 div 的尺寸吗？（如果是这种情况，我添加了一个编辑）
添加实时示例或编辑我的示例以显示您面临的错误
在这里做了一个演示：remove-space-between-bar-hbslv6.stackblitz.io
我认为错误是由于系列情节选项中的pointWidth: 20,。删除它，它会工作 .demo stackblitz.com/edit/…
我明白了，但我想要实现的是设置条形宽度，而不管我在 xAxis 上有多少类别。图表高度会变长，具体取决于我有多少条柱。我该怎么做？

【解决方案2】：

您的代码有误。您设置了groundPadding 而不是groupPadding。另外，如果您使用pointPadding和groupPadding，在它们之前设置pointWidth不会生效，因为pointWidth是根据这两个参数计算的。如果您想为所有点设置一个宽度，请仅设置 pointWidth 属性。至于每次添加另一个点时增加图表的高度，您可以使用chart.setSize 函数检查加载事件中的点数并充分更改图表大小。看看下面的例子。

API 参考：
https://api.highcharts.com/class-reference/Highcharts.Chart.html#setSize

示例：
http://jsfiddle.net/221k5wLh/

【讨论】：