HighCharts：删除 GridLine Overhang (Angular/TypeScript)答案

【问题标题】：HighCharts: Remove GridLine Overhang (Angular/TypeScript)HighCharts：删除 GridLine Overhang (Angular/TypeScript)
【发布时间】：2017-07-20 17:56:12
【问题描述】：

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

GridLine 悬垂：

当前图表设置：

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 来提供问题。

【问题讨论】：

标签： javascript angular typescript highcharts

【解决方案1】：

将您的xAxis 更新为

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

updated Fiddle

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

【讨论】：

你也可以使用旋转标签