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

Question

我正在尝试在我的 C3.js图形之一上样式轴，我知道要执行此操作，我必须修改css代码的CC_2文件，但是我在此文件中所做的这些更改应用于我网站上的每个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标签上插入图表。

现在，使用所有这些设置i 假定我可以通过在默认样式后添加此操作：

#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/