cs.js - 同时只显示一条线（在多折线图中）？答案

【问题标题】：cs.js - displaying only one line at the same time (in multi-line chart)?cs.js - 同时只显示一条线（在多折线图中）？
【发布时间】：2014-12-04 23:23:49
【问题描述】：

我是 JavaScript、D3.js 和 C3.js 的新手。我有像this 这样的多折线图。我想知道 C3 中是否有可能在图表中只显示一条线（例如 data1）。以及如何切换图表以显示第二个数据并同时关闭任何其他数据？如有任何提示，我将不胜感激！

【问题讨论】：

标签： javascript d3.js c3.js

【解决方案1】：

http://jsfiddle.net/ot19Lyt8/2/

var chart = c3.generate({
    data: {
        columns: [
            ['data1', 130, 300, 200, 300, 250, 450]
        ]
    }
});

setTimeout(function () {
    chart.unload({
        ids: 'data1',
        done: function () {
            chart.load({
                columns: [
                    ['data2', 100, 250, 150, 200, 100, 350]
                ]
            })
            }
        });
    }, 2000);

【讨论】：

【解决方案2】：

JSFiddle

如果您只想隐藏线条而不是完全删除它们，您可以使用 API 执行以下操作：

function showOnly(chart, id) {
  // get the already shown lines so we can hide them
  // (excluding our target id)
  var shown = chart.data.shown().map(function(e) { return e.id; });
  var idx = shown.indexOf(id);
  if (idx >= 0) {
    shown.splice(idx, 1);
  }
  chart.hide(shown);

  // if our target id wasn't already visible, show it
  if (idx < 0) {
    chart.show(id);
  }
}

【讨论】：