Question

我将C3.js用于多线图。我在开始时有大约2行，但在这两行中，我只想显示一行并隐藏另一行我使用过chart.show('data1') 但没有任何运气。请帮忙。

另一个问题是，我们可以在C3.js中钻取图表吗？

感谢。

代码：

<html>
  <head>
 <link href="./c3.css" rel="stylesheet" type="text/css">

<!-- Load d3.js and c3.js -->
<script src="./d3.v3.min.js" charset="utf-8"></script>
<script src="./c3.min.js"></script>
  </head>

  <body>
    <div id="chart"></div>
  </body>
<script>
var chart = c3.generate({
    bindto: '#chart',
    data: {
        x: 'x',
        columns: [
            ['x', '2013-01-01', '2013-01-02', '2013-01-03', '2013-01-04', '2013-01-05', '2013-01-06'],
            ['data1', 30, 200, 100, 400, 250],
            ['data245', 130, 340, 200, 500, 250, 350]
        ]
    },
    axis: {
        x: {
            type: 'timeseries',
            tick: {
                format: '%Y-%m-%d'
            }
        }
    }
});

chart.show('data1');


</script>
</html>

Answer 1

默认情况下，所有行都可见。所以先隐藏所有行，然后显示你想看的行

chart.hide(['data1', 'data245']);
chart.show('data1');

如果你只有2行而想要隐藏一行

chart.hide('data245');

检查show和hide api

我创建了一个fiddle来实现上述目标。

C3.JS：默认情况下，只显示一行加载线图

1 个答案: