11

累積 Nvd3 グラフに複数の y 軸を追加する必要があります。ライブラリのコードのどの部分を変更する必要があるか知っている人はいますか?

あなたがこれを自分で行い、Jsfiddle を提供できれば、さらに良いでしょう。

任意の提案をいただければ幸いです。

4

2 に答える 2

8

複数の Y 軸機能を持つ特定のチャート タイプのみがあります。

これは累積折れ線グラフでは使用できません。

ただし、マルチチャートでは使用できます。こちらのAngluar NVD3ホームページに例がありますが、棒と線で例を示しています。

ホームページから plunker の例をフォークし、系列の種類をすべての線に変更して、マルチを使用して累積折れ線グラフと同じ結果を得る方法を示しました。

(例を単純化するためにデータセットも変更しました)

プルカーの例

最初に、複数軸のオプションを追加します。

 $scope.options = {
            chart: {
                type: 'multiChart',
                height: 450,
                margin : {
                    top: 30,
                    right: 60,
                    bottom: 50,
                    left: 70
                },
                color: d3.scale.category10().range(),
                //useInteractiveGuideline: true,
                transitionDuration: 500,
                xAxis: {
                    tickFormat: function(d){
                        return d3.format(',f')(d);
                    }
                },
                yAxis1: {
                    tickFormat: function(d){
                        return d3.format(',.1f')(d);
                    }
                },
                yAxis2: {
                    tickFormat: function(d){
                        return d3.format(',.1f')(d);
                    }
                }
            }
        };

データを定義します。

 $scope.data = [{key: 'series1', type: "line", yAxis: 1, values:[{x: 10, y: 20}, {x: 20, y: 35}, {x: 30, y:18}]},
        {key: 'series2',  type: "line", yAxis: 1,values:[{x: 10, y: 12}, {x: 20, y: 26}, {x: 30, y: 15}]},
        {key: 'series3',  type: "line", yAxis: 2,values:[{x: 10, y: 0.75}, {x: 20, y: 0.9}, {x: 30, y: 0.8}]},
        {key: 'series4',  type: "line", yAxis: 2,values:[{x: 10, y: 0.2}, {x: 20, y: 0.3}, {x: 30, y: 0.4}]}]

ここでは、各シリーズに対してキーtypeとキーが設定されていることに注意してください。yAxis

<div>通常どおりに設定します。

 <nvd3 options="options" data="data"></nvd3>

以上です！

累積折れ線グラフと同じグラフが得られますが、複数の軸を設定できます。

于 2015-09-03T10:55:15.340 に答える
2

複数の y 軸をNVD3 折れ線グラフと棒グラフで既に使用可能な単一のグラフに追加することを参照している場合。以下に部分的なコード スニペットを示します。

      chart.y1Axis
          .tickFormat(d3.format(',f'));

      chart.y2Axis
          .tickFormat(function(d) { return '$' + d3.format(',f')(d) });
于 2015-09-02T22:01:50.687 に答える