2016-10-25 2 views
1

angle-nvd3のチャートでこの問題が発生しました。それらはlinePlusBarChartで、うまく動作しますが、補間をcardinalに変更すると、スクリーンショットに表示されたような行が表示されます。Nvd3チャートのトップラインパッディング

どうすれば解決できますか?

私のチャートオプション:

vm.chartOptions = { 
    chart: { 
     type: 'linePlusBarChart', 
     height: 450, 
     margin: { 
      top: 0, 
      right: 50, 
      bottom: 50, 
      left: 50 
     }, 
     focusEnable: false, 
     duration: 250, 
     forceY: [0], 
     groupSpacing: 0.5, 
     interpolate: 'cardinal', 
     xAxis: { 
      axisLabel: false, 
      showMaxMin: false, 
      tickFormat: function(d) { 
       return d3.time.format('%b %y')(new Date(d)); 
      } 
     }, 
     y1Axis: { 
      showMaxMin: false, 
      tickFormat: function(d) { 
       if (d > 0) return '$' + d3.format(',f')(d); 
      } 
     }, 
     y2Axis: { 
      showMaxMin: false, 
      tickFormat: function(d) { 
       if (d > 0) return d3.format(',f')(d); 
      } 
     } 
    } 
}; 

The chart

+0

こんにちは、私は直面しています 同じ問題。だから、どうやってこの問題を解決したのだろう?あらかじめ高校で –

+0

自分自身を見て、以下の答えを見てください。 –

+0

Thanxたくさん。あなたの答えは私が実装したソリューションに似ています –

答えて

1

私はそれがforceYパラメータとY軸を操作解く:

var values = [1, 2, 3, 4], // the chart values this is only for example 
    maxY = 0, 
    forceY = [0]; 

if (values && values.length) { 
    maxY = _.max(values, function(o) { 
     return o.y; 
    }); 
} 
if (maxY && maxY.y) { 
    forceY = [0, (maxY.y * 15/100) + maxY.y]; 
} 

そしてちょうどチャートにパラメータforceY: forceYを追加

関連する問題