nvd3 Orientierungsachse auf Flächendiagramm

Question

Beim Erstellen eines nvd3-Flächendiagramms gibt es Möglichkeiten, die Ausrichtung der Achse zu ändern, dh von oben nach unten beginnend, funktioniert dies gut mit Nicht-Flächendiagrammen, wenn ich dies mit Bereich versuche Da die Datenpunkte in der Serie gut angeordnet sind, besteht das Problem darin, dass der gerenderte Bereich immer noch in der gleichen Richtung verläuft, also von unten nach oben.

Gibt es eine Möglichkeit, dieses Problem zu beheben?

Ich verwende Winkel nvd3 mit den folgenden Optionen auf nvd3 Initialisierung:

var app = angular.module('plunker', ['nvd3']); 

app.controller('MainCtrl', function($scope) { 

    $scope.options = { 
     chart: { 
      type: 'lineChart', 
      height: 450, 
      margin : { 
       top: 20, 
       right: 20, 
       bottom: 40, 
       left: 55 
      }, 
      yDomain: [100, 0], 
      x: function(d){ return d.x; }, 
      y: function(d){ return d.y; }, 
     } 
    }; 

    $scope.data = [{ 
     "area": true, 
     "values": [ 
      { 
       "x": 1, 
       "y": 50 
      }, 
      { 
       "x": 2, 
       "y": 55 
      }, 
      { 
       "x": 3, 
       "y": 60 
      }, 
      { 
       "x": 4, 
       "y": 70 
      } 
      ] 
    }]; 

});

Hier ein Plünderer, um das Problem zu zeigen.

https://plnkr.co/edit/pXeFbe0w4BK6eGcfyXZ4?p=preview

Answer 1

Mit orientieren Methode hilft Damit können Sie die Achse platzieren, wo immer Sie wollen (links, rechts, oben, unten), ist aber nicht die Art und Weise zu ändern, die Achse gemeint ist aufgetragen, verändert sich nur die Position nicht orientieren.

Zum Beispiel 100-0 anstelle von 0 bis 100. Ich mit einem CSS-Ansatz am Ende einen Spiegeleffekt zu machen und bekommen, was ich wollte:

.chart { 
    transform: rotate(180deg) scaleX(-1); 
} 

es Dies wird das Diagramm drehen und machen sehen wie gewünscht aus, da das Plotten auf der gegenüberliegenden Seite arbeitet, wie ich es ursprünglich erreichen wollte.

Answer 2

Nach der neuesten Version NVD3 auf Github here es Ihnen die Orientierung der Achse zu ändern.

Dies geschieht mit Plan NVD3 und nicht angular NVD3, sollte ein ähnlicher Weg in Winkel.

zu left über here

chart.xAxis.orient('top'); // Its 'bottom' by default 

standardmäßig yAchse gesetzt:

Um xAchse Versuch zu ändern. Sie haben 2 Möglichkeiten, die yAchse Orientierung zu ändern:

1. chart.rightAlignYAxis(true) oder

2. chart.yAxis.orient('right'); // Its 'left' by default

Weitere Informationen über Axis-here

ich diesen Code nicht getestet haben Sieh nicht, warum es nicht w Ork.

Hope it