javascript - cs.js - 同時に 1 行だけを表示する (マルチライン チャート)?

Question

JavaScript、D3.js、および C3.js は初めてです。このような複数折れ線グラフがあります。C3でチャートに1行だけ表示する可能性はあるのだろうか(fe data1)。また、グラフを切り替えて秒のデータを表示し、同時に他のデータをオフにする方法は? ヒントをいただければ幸いです。

Answer 1

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

Answer 2

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