Question

在创建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
             }
          ]
    }];

}）;

这是一个能够显示问题的傻瓜。

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

Answer 1

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

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

要更改xAx，请尝试：

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

默认情况下，yAxis设置为left超过here。您有2个选项可以更改yAxis方向：

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

有关Axis here

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

希望有所帮助

Answer 2

使用orient方法可以将轴放在任何位置（左，右，上，下），但不是要改变轴的绘制方式，只是改变位置而不是方向。

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

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

这将转动图表并使其看起来符合要求，因为绘图正在我最初想要实现的另一面。

面积图上的nvd3方向轴

2 个答案: