如何使 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;
}

我用两个图表创建了一个 fiddle 示例，第二个显示了修改后的 css 设置：http://jsfiddle.net/du46zptL/5/

How to make C3.js Style Changes Apply to Only One Chart