c3图表显示我希望隐藏的数据

Question

我正在使用c3图表，我想要做的是默认隐藏一些数据，然后允许用户查看他们需要的数据。 （完美的场景是只能一次切换一个系列）。但主要问题是我似乎无法正确显示图表，只有一个系列。这是一个例子。任何想法为什么它显示一点点的其他系列？它应该只显示“C”（绿色的）

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的，但这样做使得酒吧1px的广泛出于某种原因，GRR（我看你提起C3错误，我要添加到发现那）

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/