1

D3、NVD3、およびAngular-NVD3は初めてです。Angular-NVD3 を使用して、次のようなチャートを作成する必要があります。

SO の質問: NVD3 積み上げ棒グラフと線の重なり

(SOの質問にはJSフィドルがあります)。

Angular-NVD3 には 2 つのチャートがあり、それぞれが必要なことのほとんどを達成していますが、すべてではありません。

それらは MultiBar と MultiChart です。( http://krispo.github.io/angular-nvd3/#/quickstart ) 例:

つまり、棒グラフの上に線 (または複数の線) を重ねた積み上げ棒グラフが必要です。これを行うには、「multiBar」チャートの代わりに「multiChart」を使用する必要があると思います。(私が間違っている場合は修正してください)。

上記の SO の例は NVD3 ライブラリを変更しますが、これは避けたいと思います。調査した結果、彼らがこのアプローチを選択した理由がわかりました。

multiChart オブジェクトの nv.d3.js (バージョン 1.8.2)、Lines 9068-9069 :

    bars1 = nv.models.multiBar().stacked(false).yScale(yScale1),
    bars2 = nv.models.multiBar().stacked(false).yScale(yScale2),

これらの行を に変更すると.stacked(true)、バーが積み上げられます。

Angular-NVD3 を使用して、ライブラリを変更せずに必要なことを達成するにはどうすればよいですか?

理想的には、ソリューションは純粋な構成になります。次の最も理想的な状況は、実行時に「スタックされた」値を囲んでいるコンポーネント内から設定することですが、オブジェクトにアクセスできないようです。

これらの抽象化の要点はそのような複雑さを回避することであるため、可能であれば非常に複雑なソリューションを避けたいと思います。ただし、すべてのソリューションを歓迎します。

4

2 に答える 2

0

マルチチャートを使用します。バーを並べて取得するには、両方のバー データ セットで yAxis: 1 を設定します。

https://github.com/novus/nvd3/blob/master/examples/multiChart.html (リポジトリの例は Web サイトよりも多くをカバーしています)

于 2019-04-12T14:39:36.247 に答える