c3.js : 如何隐藏特定数据集的点?

Question

假设我有两个数据集，data1 和 data2，但我想隐藏 data2 上的点/圆。我该怎么做？

var chart = c3.generate({
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
]
}
})

Answer 1

使用 CSS： Source Here 尝试一下。c3-circles-data2和c3-circles-data1是 c3 为给定标签键(如 data1，data2)生成的类。

var chart = c3.generate({
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
]
}
})

#chart .c3-circles-data2 {
display: none;
}

<link href="https://unpkg.com/c3@0.4.14/c3.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://unpkg.com/c3@0.4.14/c3.js"></script>
<div class='chart'>
<div id='chart'></div>
</div>

注意：如果您想从两个系列中删除点，您可以添加

point: { show: false }

数据之后。

Answer 2

不是 js 解决方案，但对于所有点，c3 在包装器组元素上添加一个类作为相应标签的c3-circles-data1c3-circles-data2，您可以将其用于带有标签 data2 的数据，您可以在 CSS 中扩展 将 none 显示为：

#chart  .c3-circles-data2{
display:none
}

样品小提琴