0

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 用に独自のイベントを作成する必要がありますか (試してみましたが、うまくいかないようです)。

4

1 に答える 1