angularjs-nvd3-directives を使用しています。
値に基づいて個々のバーに色を付ける必要があります。バーを選択し、レンダリング後に色を付けるコールバックを使用して、angularjs-nvd3-directives でこれを行うことができます。
<nvd3-multi-bar-chart
data="vm.chartData"
id="chartOne"
width="400"
height="550"
showXAxis="true"
showYAxis="true"
noData="Charts not available"
delay="2400"
yAxisTickFormat="vm.yAxisTickFormatFunction()"
forcey="[0,9]"
callback="vm.colorFunction()"
objectequality="true">
<svg></svg>
</nvd3-multi-bar-chart>
コールバック関数のセレクターは次のようになります。
d3.selectAll("rect.nv-bar")
.style("fill", function(d, i){
return d.y > 50 ? "red":"blue";
});
全体として、angularjs-nvd3-directives の使用は素晴らしく、時間を節約できましたが、レンダリング後にセレクターを使用してチャートをカスタマイズするのは大変な作業のように思えます (個々のバーに色を付ける、x/y 軸に色を付けるなど...)。
当面の問題は、ウィンドウのサイズを変更すると、元の青の色に戻ることです。バーへの更新を保持する方法はありますか? window.onresize 用に独自のイベントを作成する必要がありますか (試してみましたが、うまくいかないようです)。