javascript - 面积图上的 nvd3 方向轴

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

});

这里有一个 plunker 来展示这个问题。

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

Answer 1

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

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

要更改 xAxis，请尝试:

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

默认情况下，yAxis 设置为 here 上的 left 。您有 2 个选项来更改 yAxis 方向:

1. chart.rightAlignYAxis(true)或

2. chart.yAxis.orient('右');//默认为“左”

有关安讯士的更多信息 here

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

希望对你有帮助