Javascript 如何使C3.js样式更改仅应用于一个图表

我正在尝试在我的

C3.js

图上设置轴的样式，我知道要做到这一点，我必须修改

C3.js

代码的

css

文件，但我在这个文件中所做的这些更改适用于我网站上的每个

C3.js

图表。我的问题是，我如何才能做出只适用于我的一张图表的更改

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

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

这就是我如何将我的

C3.js

图表添加到HTML正文中的方法：

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

---

但这对任何图表都没有影响，我猜这是因为原始样式覆盖了它。如何使其仅影响

scan\u duration\u chart\u container

中的一个图表，而不影响其他图表

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

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

---

我创建了一个包含两个图表的fiddle示例，第二个图表显示了修改后的css设置：

即将发布相同的设置，他们有两个用于声明的选择器，但他们只在第一个图表中添加了#id限定符（加上id为的元素是c3类，因此需要删除空格，否则它将查找c3类中不存在的子元素）

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