Highcharts 如何在条形图中隐藏网格线突出

我使用的是Highcharts，我想把网格线的突出部分隐藏在图形区域之外。我是说

现在看起来是这样的：

我希望它看起来像这样（图表右侧的网格线的突出部分是隐藏的）：

highcharts配置如下所示：

{
  chart: {
    width: 420,
    height: 350,
    style: {
      textAlign: 'center',
      'text-align': 'center',
    },
  },
  colors: ['#a1cbff'],
  title: {
    text: undefined,
  },
  xAxis: {
    title: { text: undefined },
    tickInterval: 0.1,
    max: 1,
    min: 0,
    gridLineWidth: 1,
  },
  yAxis: [{
    title: { text: undefined },
  }],
  series: [{
    type: 'column',
    pointPlacement: 'between',
    data: [...SOME_DATA],
  }],
  plotOptions: {
    column: {
      pointPadding: 0,
      borderWidth: 1,
      groupPadding: 0,
      shadow: false,
    },
  },
  tooltip: {
    formatter() { return this.y; },
  },
  legend: {
    enabled: false,
  },
  exporting: false,
  credits: false,
}

---

然而，这是有可能的，它不是那么简单和直观，使它如你所期望的高图表。检查下面发布的演示和代码，您将在那里找到具有

pointRange=0.1

，

pointPlacement=-0.5

，

min:0.05

，

max:0.95

和

tickInterval=0.1

的解决方案

代码：

Highcharts.chart('container', {
  chart: {
    width: 420,
    height: 350,
    style: {
      textAlign: 'center',
      'text-align': 'center',
    },
  },
  colors: ['#a1cbff'],
  title: {
    text: undefined,
  },
  yAxis: [{
    title: {
      text: undefined
    }
  }],
  xAxis: {
    min: 0.05,
    max: 0.95,
    tickInterval: 0.1
  },
  series: [{
    type: 'column',
    pointPlacement: -0.5,
    pointRange: 0.1,
    data: [
      [0.1, 130],
      [0.2, 110],
      [0.3, 240],
      [0.4, 150],
      [0.5, 250],
      [0.6, 190],
      [0.7, 240],
      [0.8, 220],
      [0.9, 270],
      [1, 160]
    ],
  }],
  plotOptions: {
    column: {
      pointPadding: 0,
      borderWidth: 1,
      groupPadding: 0,
      shadow: false,
    },
  },
  tooltip: {
    formatter() {
      return this.y;
    },
  },
  legend: {
    enabled: false,
  },
  exporting: false,
  credits: false,
});

演示：

API参考：

---

谢谢，这太完美了！