2017-12-05 23 views
1

c3.jsを使用して積み上げ棒グラフを作成しようとしています。積み重なった棒グラフの棒の寸法がY軸に平行にならない

私が持っている問題は、生成されるバーがY軸にコーラル化されていないことです。

これは私がこれまで持っているものです:https://codepen.io/anon/pen/dZLMoY?editors=1010

そして、これはコードです:あなたは棒グラフが生成されますが、それは正しく生成されていない見ることができるように

c3.generate({ 
    bindto:'#chart', 
    data: { 
     type: 'bar', 
     columns: [ 
      ['Column 1', 2, 10, 22, 34, 9, 60], 
      ['Column 2', 6, 15, 43, 36, 45, 75], 
      ['Column 3', 10, 20, 79, 39, 50, 97], 
      ['Column 4', 12, 27, 87, 76, 55, 150] 
     ], 
     groups: [ 
      ['Column 1', 'Column 2', 'Column 3', 'Column 4'] 
     ], 
     }, 
     bar: { 
     width: 15, 
     }, 
     axis: { 
     x: { 
      show: true 
     }, 
     y: { 
      show: true, 
      padding: { 
      top: 0, 
      bottom: 0 
      }, 
      tick: { 
      //count: 6 
      }, 
      min: 0, 
      max: 150 
     } 
     }, 
     grid: { 
     x: { 
      show: true 
     }, 
     y: { 
      show: true 
     } 
     } 
}); 

。提供されている値が正しくない場合でも、最後の4つのバーはすべて同じです。

考慮するとは、Y軸は、その後150第二に設定された最大値を持っていること、3番目と4番目のバーは、私が間違って何をやっている第五バー

と同じ高さにocupyべきではないのですか?

答えて

1

axis.y.max値が積み上げ合計よりも小さいため、チャートが上部にクリップされます。

c3.generate({ 
    ... 
     axis: { 
     ... 
     y: { 
      ... 
      min: 0, 
      max: 500 
     } 
     } 
    } 

またはsee it in action

はこれを試してみてください。

関連する問題