c3グラフは、非表示にしたいときのデータを示します

Question

私は現在c3チャートを使用しています。私がしたいのは、デフォルトでいくつかのデータを隠し、必要なものを表示できるようにすることです。 （完璧なシナリオは、一度に1つだけシリーズを切り替えることです）。しかし、主な問題は、チャートを1つのシリーズだけで正しくレンダリングすることができないことです。ここに例があります。なぜそれが他のシリーズの少しを示している任意のアイデア？それは唯一の「C」（緑1）を示すべきである

var somethingWeLoadedFromTheServer = [ 
    {a:23, b:45, c:12}, 
    {a:34, b:19, c:38}, 
    {a:25, b:62, c:56}, 
    {a:44, b:88, c:74} 
]; 

var chart = c3.generate({ 
    data: { 
     json: somethingWeLoadedFromTheServer, 
     keys: { 
      value: ['a', 'b','c'], 
      //x: 'c' 
     }, 
     type: 'bar', 
     hide: ['a','b'] 
    }, 

    bar: { 
     width: { 
      ratio: 0.5 // this makes bar width 50% of length between ticks 
     } 
    }, 
    axis: { 
    //rotated: true 
    } 
// axis: { 
//  y: { 
//   tick: { 
//    count: 3, 
//    format: d3.format('.2f') 
//   } 
//  } 
// } 
}); 

http://jsfiddle.net/Lbej86Lf/

Answer 1

葉、JSONベースの棒グラフは少しバギーことができます - 私は実際にあなたが助けるために見ている効果を使用しました'積み上げられていない'積み重ね棒グラフをサポートします。つまり、同じ場所にグラフを重ねます。

これは機能しますが、最初のオンレンドされたコールバックで関連するシリーズを非表示にします。代わりにoninitを使用することが可能ですが、やっているが、GRR

var firstRun = true; 
var chart = c3.generate({ 
data: { 
    json: somethingWeLoadedFromTheServer, 
    keys: { 
     value: ['a', 'b','c'], 
     //x: 'c' 
    }, 
    type: 'bar', 
    //hide: ['a','b'] 
}, 

bar: { 
    width: { 
     ratio: 0.5 // this makes bar width 50% of length between ticks 
    } 
}, 
axis: { 
//rotated: true 
}, 
onrendered: function() { 
    if (firstRun) { 
     this.api.hide(['a', 'b']); 
     firstRun = false; 
    } 
}, 
// axis: { 
//  y: { 
//   tick: { 
//    count: 3, 
//    format: d3.format('.2f') 
//   } 
//  } 
// } 
}); 

http://jsfiddle.net/Lbej86Lf/1/

（あなたはC3のバグを提出し、私が見る、私はその上に私の調査結果を追加します）何らかの理由で1ピクセル幅の広いバーを作ります