javascript - 如何更改图表的特定网格线的颜色

Question

我正在使用 Chartist.js 渲染折线图我正在尝试更改特定垂直网格的颜色，但我没有在插件中找到任何方法。

如图所示，我想将第 2 条和第 9 条垂直网格线变暗。 (第 2 和第 9 只是一个例子，我将从后端获取要动态突出显示的网格索引。)

我正在考虑以某种方式在绘制事件中执行此操作，但不确定如何执行此操作。

chart.on('draw', function (data) {
  if (data.type === 'grid') {

  }
});

Answer 1

最简单的方法是通过 CSS。这样的事情会起作用:


.ct-grid.ct-horizo​​ntal:nth-of-type(2),
.ct-grid.ct-horizo​​ntal:nth-of-type(9) {
笔划宽度:3；
描边-dasharray:10px 5px；
}


显然，如果您需要打开和关闭这些较粗的网格线，您可以添加一个父类，然后只需在父元素上切换它即可。

注意 - 有点令人惊讶的是，chartist.js 似乎将类 ct-horizo​​ntal 添加到垂直网格线，反之亦然......

引用这个 fiddle :http://jsfiddle.net/whf5h1yu/2/