2

NVD3ライブラリを使用して、スタックされたmultiBarChartを表示しています。また、平均値がどこにあるかを示すために、各バーに1本の水平線(---)を追加する必要があります。

最後のデータセット(シリーズ)を平均と見なしました。

test_data = [
    {"key":"Series 1",  "values":[{"x":0,"y":30},{"x":1,"y":15},{"x":2,"y":10}]},
    {"key":"Series 2",  "values":[{"x":0,"y":2},{"x":1,"y":7},{"x":2,"y":3}]},
    {"key":"Average","values": [{"x":0,"y":6},{"x":1,"y":4},{"x":2,"y":40}]}
];

最後のシリーズを選択し、高さを1に変更して、正方形ではなく線をシミュレートしました。また、「y」の値を変更することで、線の位置を垂直方向に制御することもできました。

var lastBars = $('.nv-group:last rect');
lastBars.attr('height', 2);
lastBars.attr('y',function(a, y, c){
    return parseFloat(y) + 50;
});

画面の右側のYに「水平線」を配置するには、データとともに提供される「y」を画面の対応する「Y」にスケーリングして、Y軸の正しい値に合わせる方法を見つける必要があります。

NVD3のソースコードを読んでいて、yDomainとyScaleを使ってscreen-Y値を計算しているようですが、それらの使い方やライブラリコードの外部からアクセスする方法がわかりません。

何か案が?

4

0 に答える 0