Question

我正在使用C3.js为数据系列创建折线图。

我正在努力展示＆＃34;积分＆＃34;仅适用于其中一个系列。

基本上，我首先创建一个包含一些参考数据的多系列折线图，然后我加载（使用char.load）一个新的特定数据行，我想在该数据行中显示点，仅针对该特定行。其他参考线保留隐藏点。

这可能通过C3.js吗？如果是的话，你能指导我这样做，谢谢！此外，欢迎在使用C3.js时使用D3.js执行此操作的任何方法。

这是一个官方示例，其中所有点都隐藏在数据系列中，仅供参考： http://c3js.org/samples/point_show.html

Answer 1

c3.js为其所有元素提供了全面的类属性，因此您可以使用CSS自定义它们。例如，要隐藏第二个系列上的点，请添加此CSS：

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

示例here。

Answer 2

以下是使用图表对象的show和hide方法选择性地显示行的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>show hide</title>
    <meta charset="utf-8" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
</head>
<body>
    <div id="chart"></div>
    <script>
        var chart = c3.generate({
            bindto: '#chart',
            data: {
                x: 'x',
                columns: [
                    ['x',     1, 2, 3, 4, 5],
                    ['y1', 3, 5, 6, 4, 5],
                    ['y2', 2, 4, 7, 6, 5]
              ]
            }
        });

        function cbclick(a){
            var lineData = "y" + a;
            var cbID = "cb" + a
            var cb = document.getElementById(cbID);
            if (cb.checked) {
                chart.show([lineData]);
            } else {
                chart.hide([lineData]);
            }
        }
    </script>

    <div align="center">
        <input type="checkbox" id="cb1" onclick="cbclick(1)" checked="true">y1</input>
        <input type="checkbox" id="cb2" onclick="cbclick(2)" checked="true">y2</input>
    </div>
</body>

Answer 3

C3.js库中有用于此目的的代码：

point: {
  show: false,
}

您可以在here

进行检查

C3.js - 为数据系列独立显示/隐藏点

3 个答案: