如何更改图表的特定网格线的颜色
How to change color of particular grid lines of chartist chart
我正在使用 Chartist.js 渲染折线图我正在尝试更改特定垂直网格的颜色，但我没有在插件中找到这样做的任何方法。
如图所示，我想将第 2 条和第 9 条垂直网格线调暗。 （第 2 和第 9 只是一个例子，我将从后端获取要动态突出显示的网格索引。）
我正在考虑以某种方式在绘制事件中执行此操作，但不确定如何执行此操作。
chart.on('draw', function (data) {
if (data.type === 'grid') {
}
});
最简单的方法是通过 CSS。这样的事情会起作用：
.ct-grid.ct-horizontal:nth-of-type(2),
.ct-grid.ct-horizontal:nth-of-type(9) {
stroke-width: 3;
stroke-dasharray: 10px 5px;
}
显然，您可以添加一个父元素 class，然后如果您需要打开和关闭这些较粗的网格线，只需在父元素上切换它即可。
注意 - 有点令人惊讶的是，chartist.js 似乎将 class ct-horizontal 添加到垂直网格线，反之亦然......
参考这个fiddle：http://jsfiddle.net/whf5h1yu/2/
我正在使用 Chartist.js 渲染折线图我正在尝试更改特定垂直网格的颜色，但我没有在插件中找到这样做的任何方法。
如图所示，我想将第 2 条和第 9 条垂直网格线调暗。 （第 2 和第 9 只是一个例子，我将从后端获取要动态突出显示的网格索引。）
我正在考虑以某种方式在绘制事件中执行此操作，但不确定如何执行此操作。
chart.on('draw', function (data) {
if (data.type === 'grid') {
}
});
最简单的方法是通过 CSS。这样的事情会起作用：
.ct-grid.ct-horizontal:nth-of-type(2),
.ct-grid.ct-horizontal:nth-of-type(9) {
stroke-width: 3;
stroke-dasharray: 10px 5px;
}
显然，您可以添加一个父元素 class，然后如果您需要打开和关闭这些较粗的网格线，只需在父元素上切换它即可。
注意 - 有点令人惊讶的是，chartist.js 似乎将 class ct-horizontal 添加到垂直网格线，反之亦然......
参考这个fiddle：http://jsfiddle.net/whf5h1yu/2/