排除零個值

Question

讓下面的圖表http://c3js.org/samples/chart_bar.html 的舉個例子，但與下面的數據替換列中的數據：

var chart = c3.generate({ 
    data: { 
     columns: [ 
      ['data1', 30, 0, 100, 0, 150, 250], 
      ['data2', 130, 0, 140, 200, 0, 50] 
     ], 
     type: 'bar' 
    }, 
    bar: { 
     width: { 
      ratio: 0.5 // this makes bar width 50% of length between ticks 
     } 
     // or 
     //width: 100 // this makes bar width 100px 
    } 
}); 

setTimeout(function() { 
    chart.load({ 
     columns: [ 
      ['data3', 130, -150, 200, 300, -200, 100] 
     ] 
    }); 
}, 1000); 

正如我們看到的，我們有很多的空白或零值酒吧，我們如何刪除它並刪除空白區域。 （不躲，我知道如何使用CSS隱藏）

Image example, what should be removed

Answer 1

在https://github.com/c3js/c3/issues/81 一派則需要更換0 '到'空' 和補充一點：

line: { 
    connectNull: true, 
    }, 

var chart = c3.generate({ 
    data: { 
     columns: [ 
      ['data1', 30, null, 100, null, 150, 250], 
      ['data2', 130, null, 140, 200, null, 50] 
     ], 
     line: { 
     connectNull: true, 
     }, 
     type: 'bar' 
    }, 
    bar: { 
     width: { 
      ratio: 0.5 // this makes bar width 50% of length between ticks 
     } 
     // or 
     //width: 100 // this makes bar width 100px 
    } 
}); 

setTimeout(function() { 
    chart.load({ 
     columns: [ 
      ['data3', 130, -150, 200, 300, -200, 100] 
     ] 
    }); 
}, 1000); 

Answer 2

只需添加

line: { 
    connectNull: true, 
    } 

在你的c3.generate塊中。 它將連接圖表上的所有點/條/ ...，其間有一個零值。 它與null以及0一起使用。