2017-02-15 12 views
0

のLinePlusBarChartに特定Y軸の使用を強制する方法nvd3 linePlusBarChartはまた、例えばhere(及び角度-nvd3例hereで)に示されている複数yAxisを、使用することを可能にします。例(plunkers参照)では、それらは単に2つの一連のデータを使用し、自動的にそれぞれyAxisの1つにマップされます。私にとっては、これは起こりません。はnvd3

私のデータは次のようになります。

[ 
    { 
    "key": "Series 1", 
    "bars": true, 
    "values": [ [1425942000, 20], [1425942040, 25], ... ] 
    }, 
    { 
    "key": "Series 2", 
    "bars": true, 
    "values": [ [1425942000, 80], [1425942040, 40], ... ] 
    }, 
    { 
    "key": "Series 3", 
    "bars": true, 
    "values": [ [1425942000, 37], [1425942040, 55], ... ] 
    }, 
    { 
    "key": "Series 4", 
    "values": [ [1425942000, 20132.44], [1425942040, 40032.93], ... ] 
    } 
] 

のでデータから、原因で規模の大きな違いの第四シリーズのために使用される第2のyAxisが必要であることは明らかです。

チャートの設定は、この(それは角度-nvd3のための設定であることに注意してください)のようになります。しかし、私は自分自身を添付するために、いくつかのデータ系列を強制する方法を見つけるように見えることはできません

{ 
    type: 'linePlusBarChart', 
    height: 500, 
    margin : { 
     top: 50, 
     right: 75, 
     bottom: 50, 
     left: 50 
    }, 
    xAxis: { 
     axisLabel: 'Time', 
     tickFormat: function(d) { 
      return d3.time.format('%Y/%m/%d')(new Date(d)); 
     } 
    }, 
    x2Axis: { 
     tickFormat: function(d) { 
      return d3.time.format('%b %Y')(new Date(d)); 
     } 
    }, 
    y1Axis: { 
     axisLabel: 'Just some numbers here', 
     axisLabelDistance: -10, 
     tickFormat: function(d) { 
      return d3.format(',')(d); 
     } 
    }, 
    y2Axis: { 
     axisLabel: 'Some money numbers', 
     axisLabelDistance: 10, 
     width: 100, 
     tickFormat: function(d) { 
      return '$ ' + d3.format(',.2f')(d); 
     } 
    }, 
    y3Axis: {}, 
    y4Axis: {}, 
    bars: { 
     forceY: [0], 
     padData: true 
    }, 
    bars2: { 
     forceY: [0], 
     padData: true 
    } 
} 

特定のyAxisに現在、4つのシリーズすべてが右軸に取り付けられています。

シリーズオブジェクトにyAxis: 1(またはyAxis: 2)属性を追加しようとしましたが、これは他のグラフタイプに対して行われますが、動作しません。

誰かが私のためにいくつかのアドバイスを持っているなら、私は本当にそれを感謝します。

ボーナスの質問:同じことを達成するための方法はありますか?lineChartlinePlusBarChartを使用したいですか?

答えて

1

自分で間違いを見つけました。シリーズはbars: trueではなくbar: trueを使用する必要があります。次にyAxisの両方が使用されます。

[ 
    { 
    "key": "Series 1", 
    "bar": true, <-- instead of `"bars": true` 
    "values": [ [1425942000, 20], [1425942040, 25], ... ] 
    }, 
    ... 
] 
関連する問題