C3.js - Show/hide points independently for a data series

问题

I am creating a line chart for a data series using C3.js.

I am struggling in trying to show the "points" only for one of the series.

Basically, first I am creating a multiple series line chart with some reference data, and then I am loading (with char.load) a new particular data line in which I want to show points, only for that particular line while the other reference lines remain with hidden points.

Is that possible via C3.js? If so, could you instruct me to do so, thanks! Also, any method to do so using D3.js while using C3.js is welcome.

This is the official example in which all points are hidden for a data series, just for reference: http://c3js.org/samples/point_show.html

回答1:

c3.js provides comprehensive class attributes on all its elements so you can customize them with CSS. For example to hide the points on the 2nd series add this CSS:

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

Example here.

回答2:

Here's an example of using the show and hide methods of a chart object to selectively display lines:

<!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>

来源：https://stackoverflow.com/questions/27116623/c3-js-show-hide-points-independently-for-a-data-series

标签

d3.js

charts

c3.js