时间戳

首页 > 解决方案 > 如何使 C3.js 样式更改仅适用于一个图表

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

问题描述

我正在尝试在我的一个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而不会影响其他图表？

标签： javascripthtmlcssc3.js

解决方案

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

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

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

推荐阅读