Question

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

Answer 1

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);

Answer 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);
  }
}

cs.js - 同时只显示一行（在多线图表中）？

2 个答案: