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：源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-data1 c3-circles-data2，您可以使用标签data2为您提供数据，您可以扩展在css中显示none：

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

示例FIDDLE

c3.js：如何隐藏特定数据集的点？

2 个答案: