显示/启用gridlines JavaScript图表网格线

Question

我正在尝试弄清楚如何为Shield UI JavaScript图表设置或启用网格线网络。我有一个线型图形，并希望启用网格线，以便数据变得更容易为用户读取。我可以在网上找到的是lines stype：

axisX: {
plotStripColor: 'red',
plotStripDashStyle: 'ShortDashDot',
plotStripWidth: 2
}

但是实际的结果并不是我需要的网格线。

Answer 1

没有你说的经典网格线或网格网。但是您可以很容易地通过使用X和Y轴的小刻度来模拟一个。

axisY: {
minorPlotStripColor: 'red',
minorPlotStripWidth: 2,
minorTicksRepeat: 'auto',
},

您可以指定线条的颜色(在给定示例中为红色)、线条粗细，您需要将线条粗细设置为大于0的值才可见。在大多数情况下，minorTicksRepeat属性最好设置为auto。原因是当设置为固定值时，当用户放大网格线时，网格线将变得太粗，这可能会阻止用户轻松读取图形。

以下是您可能会发现有用的代码示例：

axisX: {
   },
   minorPlotStripColor: 'red',
   minorPlotStripWidth: 2,
   minorTicksRepeat: 'auto'
  },

  axisY: {
   minorPlotStripColor: 'red',
   minorPlotStripWidth: 2,
   minorTicksRepeat: 'auto',
  },