Javascript 面积图上的nvd3方向轴

在创建nvd3面积图时，有一些方法可以更改轴的方向，这意味着从上到下，这对非面积图很好，当我尝试使用面积系列时，数据点位置很好，问题是渲染区域仍然保持在相同的方向上，我的意思是从下到上

有没有办法解决这个问题

我正在使用angular-nvd3，在nvd3初始化时具有以下选项：

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
             }
          ]
    }];

}))

这里有一个plunker来说明这个问题

---

根据Github上最新的NVD3版本，它允许您更改轴的方向

这是使用计划NVD3和而不是角度NVD3来完成的，在角度上应该是类似的方式

要更改xAxis，请尝试：

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

默认情况下，yAxis设置为

left

over。您有两个选项可以更改yAxis方向：

chart.rightAlignYAxis（真）

或

chart.yAxis.orient（'right'）；//其默认为“左”

有关Axis的更多信息

我还没有测试过这段代码，不明白为什么它不起作用

---

希望它有帮助

根据Github上最新的NVD3版本，它允许您更改轴的方向

这是使用计划NVD3和而不是角度NVD3来完成的，在角度上应该是类似的方式

要更改xAxis，请尝试：

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

默认情况下，yAxis设置为

left

over。您有两个选项可以更改yAxis方向：

chart.rightAlignYAxis（真）

或

chart.yAxis.orient（'right'）；//其默认为“左”

有关Axis的更多信息

我还没有测试过这段代码，不明白为什么它不起作用

---

希望对您有所帮助。

使用orient方法，您可以将轴放置在任意位置（左、右、上、下），但这并不意味着更改轴的打印方式，只是更改位置而不是方向

例如，从100到0，而不是从0到100。我最终用css方法制作了镜像效果，并得到了我想要的：

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

---

这将转动图表并使其看起来符合要求，因为绘图是在我最初希望实现的相反方向上进行的。

使用“定向”方法可以将轴放置在您想要的任何位置（左、右、上、下），但不是要更改轴的打印方式，只是更改位置而不是方向

例如，从100到0，而不是从0到100。我最终用css方法制作了镜像效果，并得到了我想要的：

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

---

这将改变图表并使其看起来符合要求，因为绘图工作与我最初想要实现的相反。

你能发布JS fiddle/Plunkr吗？我刚刚用代码段和plunker@Jeznag更新了帖子。你是否尝试过使用堆叠面积图而不是折线图？如果您使用stackedAreaChart作为模型，它似乎可以正常工作。@jeznag问题是，根据我的需求，我需要使用multichart，因为它可以有线条、面积甚至条形图。您是否尝试在multi chart中使用stackedArea？这应该行得通。也许你可以用一个不起作用的多图表示例来更新plnkr。你能发布一个JS fiddle/Plunkr吗？我刚刚用代码片段和plunker@Jeznag更新了帖子。你试过用堆积面积图而不是折线图吗？如果您使用stackedAreaChart作为模型，它似乎可以正常工作。@jeznag问题是，根据我的需求，我需要使用multichart，因为它可以有线条、面积甚至条形图。您是否尝试在multi chart中使用stackedArea？这应该行得通。也许你可以用一个不起作用的多图表示例来更新plnkr。你是对的，这允许你将轴放置在任何你想要的地方，但并不意味着改变轴的打印方式，只是改变位置而不是方向。例如，从100到0，而不是从0到100。“我最终得到了一个css翻译，以产生镜像效果并得到我想要的东西。@ManuelRodriguez在这里发布你的答案，并确保接受它。我相信其他人可能会发现你的解决方案很有用。你是对的，这允许你将轴放置在任何你想要的地方，但并不意味着改变轴的绘制方式，只是改变位置而不是方向。例如，从100到0，而不是从0到100。“我最终得到了一个css翻译，以产生镜像效果并得到我想要的东西。@ManuelRodriguez在这里发布你的答案，并确保接受它。我相信其他人会发现你的解决方案很有用。