面积图上的 nvd3 方向轴答案

【问题标题】：nvd3 orientation axis on area chart面积图上的 nvd3 方向轴
【发布时间】：2017-04-14 20:48:56
【问题描述】：

在创建 nvd3 面积图时，有多种方法可以更改轴的方向，即从上到下开始，这适用于非面积图，当我尝试使用面积系列时，数据点很好定位后，问题是渲染区域仍然保持在同一个方向，我的意思是，从下到上。

有没有办法解决这个问题？

我在 nvd3 初始化时使用 angular-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 来显示问题。

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

【问题讨论】：

你能发一个 JS fiddle/Plunkr 吗？
我刚刚用 sn-p 和 plunker @jeznag 更新了帖子
您是否尝试过使用堆积面积图而不是折线图？如果您使用stackedAreaChart 作为模型，它似乎可以正常工作。
@jeznag 问题是，根据我的要求，我需要多图，因为它可以有折线图、面积图甚至条形图
好的，你试过在多图表中使用stackedArea吗？那应该可以正常工作。也许您可以使用不起作用的多图表示例更新 plnkr。

标签： javascript angular d3.js nvd3.js angular-nvd3

【解决方案1】：

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

这是使用plan NVD3和NOT ANGULAR NVD3完成的，在角度上应该是类似的方式。

要更改 xAxis，请尝试：

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

默认情况下，yAxis 设置为 left 而不是 here。您有 2 个选项来更改 yAxis 方向：

chart.rightAlignYAxis(true) 或
chart.yAxis.orient('right'); // Its 'left' by default

关于安讯士的更多信息here

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

希望对你有帮助

【讨论】：

你是对的，这允许你将轴放置在任何你想要的地方，但并不意味着改变轴的绘制方式，只是改变位置而不是方向。例如，从 100 到 0 而不是 0 到 100。我最终使用 css 转换来制作镜像效果并得到我想要的。
@ManuelRodriguez 在此处发布您的答案并确保接受它。我相信其他人可能会发现您的解决方案很有用。

【解决方案2】：

使用 orient 方法允许您将轴放置在您想要的任何位置（左、右、上、下），但并不意味着改变轴的绘制方式，只是改变位置而不是方向。

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

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

这将翻转图表并使其看起来像所需的那样，因为绘图是在我最初想要实现的另一侧进行的。

【讨论】：