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

Question

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

如图所示，我想将第 2 条和第 9 条垂直网格线变暗。（第 2 和第 9 仅作为示例，我将从后端获取要动态突出显示的网格的索引。）

我想以某种方式在抽奖活动中做到这一点，但不知道如何做到这一点。

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

  }
});

Answer 1

最简单的方法是通过 CSS。像这样的东西会起作用：

.ct-grid.ct-horizontal:nth-of-type(2), .ct-grid.ct-horizontal:nth-of-type(9) { stroke-width: 3; stroke-dasharray: 10px 5px; }

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

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

请参阅此小提琴以供参考：http: //jsfiddle.net/whf5h1yu/2/