2017-03-09 1 views
1

私のアプリケーションでは、動的チャートの実装にc3チャートを使用しています。その中で私は値> 0のためだけにバーを表示する必要があります。ここにフィドルのリンクがあります。C3チャートの特定のJSON値の制限

私はバーを2010年からのみ表示する必要があります。フロントエンド側でJSON再構成を使用してこれを実現することは可能です。これ以外にも、これを達成する他の方法はありますか?

Fiddle link

JS:

var data = { "results": [{ year: 2006, amnt: 0 }, { year: 2007, amnt: 0 }, { year: 2008, amnt: 0 }, { year: 2009, amnt: 0 }, { year: 2010, amnt: 279 }, { year: 2011, amnt: 440 }, { year: 2012, amnt: 350 }, { year: 2013, amnt: 649 }, { year: 2014, amnt: 874 }, { year: 2015, amnt: 833 }, { year: 2016, amnt: 801 }] }; 

var chart = c3.generate({ 
       bindto: '#chart', 
       data: { 
        json: data.results, 
        keys: { x: 'year', value: ['amnt'] }, 
        type: 'bar', 
        colors: { 'amnt': '#8c651c' } 
       }, 
       axis: { 
        x: { 
         label: { 
          text: 'Year', 
          position: 'outer-center', 
         }, 
         type: 'category', 
         tick: { 
          centered: true 
         } 
        }, 
        y: { 
         tick: { 
          format: d3.format("$,") 
         }, 
         label: { 
          text: '($ in millions)', 
          position: 'outer-middle' 
         }, 
         padding: { 
          top: 0, 
          bottom: 0 
         } 
        } 
       }, 
       grid: { 
        y: { show: true } 
       }, 
       legend: { 
        show: false 
       } 
      }); 

HTML:

<div id="chart"></div> 

答えて

1

欲望の結果を得るためにJSONデータにfilterを使用しています。

var result = data.results.filter(function(item) { 
    return item.amnt !== 0; 
}); 

Working Fiddle

関連する問題