如何使C3.js样式更改仅适用于一张图表

Question

我正在尝试为自己的C3.js图上的轴设置样式，并且我知道要执行此操作，我必须为css代码修改C3.js文件，但是这些更改我使此文件中的内容适用于我网站上的每个C3.js图表。我的问题是如何进行更改，使其仅适用于我的一张图表。

例如，这是我要更改的样式：

.c3 path, .c3 line {
  fill: none;
  stroke: black;
}

这是将C3.js图表添加到HTML正文中的方式：

<div id="scan_duration_chart_container"></div>

在创建图表时，我添加了字段bindto: '#scan_duration_chart_container'，以便将图表插入到此div标记中。

现在，通过所有这些设置，我假定，我可以通过在默认样式之后添加以下代码来做到这一点：

#scan_duration_chart_container .c3 path, .c3 line {
  fill: none;
  stroke: white;
}

但是这对任何图表都没有影响，我猜这是因为原始样式覆盖了它。如何使它仅影响scan_duration_chart_container中的一个图表而没有其他影响？

Answer 1

我测试了一些选项，发现以下方法可以工作：

#scan_duration_chart_container.c3 line,
#scan_duration_chart_container.c3 path {
  fill: none;
  stroke: white;
}

我创建了一个带有两个图表的小提琴示例，第二个显示了修改后的CSS设置：http://jsfiddle.net/du46zptL/5/