javascript - HighCharts:删除网格线悬垂(Angular/TypeScript)

Question

我已经尝试了十几种不同的解决方案，但是当网格线直接在刻度上开始/结束时，网格线似乎总是悬垂。我正在寻找一种解决方案来消除此悬垂，或稍微移动起点/终点，以便它们出现在线上，但不会触发此悬垂弹出。在 Angular/TypeScript 环境中工作。

网格线悬垂:

当前图表设置:

chart: {
    type: 'spline'
},
title: null,
xAxis: [{
        categories: [
          'Open 11am', '12', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10pm close'
        ],
  gridLineWidth: 1,
  labels: {
    enabled: true
  },
  tickWidth: 0,
  tickmarkPlacement: 'on',
  startOnTick: true
}],
yAxis: [{
    title: null,
    labels: {
      x: 0,
      y: -2
    },
    tickLength: 0,
    tickWidth: 0
}],
series: [{
  name: null,
  data: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
  marker: {
    fillColor: '#FFFFFF',
    lineWidth: 2,
    lineColor: null
  }
}],
  credits: {
      enabled: false
  },
  legend: {
    enabled: false
  }

当开始和结束类别上有刻度线时，如何防止出现这种悬垂？

我几乎尝试了遇到的所有选项，但我承认我对 HighCharts API 还很陌生。感谢您提前回复。

编辑:

这是一个jsfiddle提供问题。

Answer 1

将您的xAxis更新为

//startOnTick: true,   
min: .5,
max: 10.5,

updated Fiddle

min as 0.5 和 max 10.5 是固定值，它会删除空格，并从代码中删除 startOnTick: true 因为它强制从刻度开始。但同时它会用省略号进行修改，因此如果不需要省略号，请注释 min