Question

在我的nvd3 lineWithFocusChart中，y轴数据外观正在连线。我有正确格式的json数据，但仍然没有正确显示y轴数据。我已将参考文件放在http://plnkr.co/edit/QwMbTL4co0wMVKaQurxq?p=preview。

我甚至正确使用了刻度格式，但外观仍然不合适。如何使此图表正确显示y轴数据？

 tickFormat: function(d){
                        return  d3.time.format('%d/%m/%y')(
                                                new Date(d))
                    }

我使用了以下排序功能。但它仍然无法正常工作。

angular.forEach($scope.data, function(series, index) {
                            series.values.sort(function(a, b) {
                                return a[0] - b[0];
                            });
                        });

Answer 1

以下功能也修复了上述图表显示问题。

angular.forEach($scope.data, function(series, index) {
                            series.values.sort(function(a, b) {
                                return a.x - b.x;
                            });
                        });

Answer 2

我不确定Angular的工作原理。从NVD3的角度来看，它需要如下所示，将y替换为已排序的时间戳。尝试将已排序的数据结构传递到图表中。

尝试此示例数据集结构：

[
  {
    "key": "Stream0",
    "values": [
      {
        "x": 0,
        "y": 1.7295799731844639,
        "series": 0
      },
      {
        "x": 1,
        "y": 1.4786744584068263,
        "series": 0
      },
      {
        "x": 2,
        "y": 1.2933604184307024,
        "series": 0
      },
      {
        "x": 3,
        "y": 1.0545169052395873,
        "series": 0
      },
      {
        "x": 4,
        "y": 0.9355866365151941,
        "series": 0
      },
      {
        "x": 5,
        "y": 0.7635212444141124,
        "series": 0
      },
      {
        "x": 6,
        "y": 0.565136089920293,
        "series": 0
      },
      {
        "x": 7,
        "y": 0.53905008125296,
        "series": 0
      },
      {
        "x": 8,
        "y": 0.37174374881238753,
        "series": 0
      },
      {
        "x": 9,
        "y": 0.34531043658548377,
        "series": 0
      },
      {
        "x": 10,
        "y": 0.328211247181182,
        "series": 0
      }
    ]
  },
  {
    "key": "Stream1",
    "values": [
      {
        "x": 0,
        "y": 0.13249877834306772,
        "series": 1
      },
      {
        "x": 1,
        "y": 0.18966416588140741,
        "series": 1
      },
      {
        "x": 2,
        "y": 0.15503209036373955,
        "series": 1
      },
      {
        "x": 3,
        "y": 0.16519284756400573,
        "series": 1
      },
      {
        "x": 4,
        "y": 0.19680925364034846,
        "series": 1
      },
      {
        "x": 5,
        "y": 0.15990817677876387,
        "series": 1
      },
      {
        "x": 6,
        "y": 0.19427819689638404,
        "series": 1
      },
      {
        "x": 7,
        "y": 0.14638497347498736,
        "series": 1
      },
      {
        "x": 8,
        "y": 0.252980017823181,
        "series": 1
      },
      {
        "x": 9,
        "y": 0.38707426684750496,
        "series": 1
      },
      {
        "x": 10,
        "y": 0.5779972814312548,
        "series": 1
      }
    ]
  },
  {
    "key": "Stream2",
    "values": [
      {
        "x": 0,
        "y": 0.6236632729965124,
        "series": 2
      },
      {
        "x": 1,
        "y": 0.7353256169924149,
        "series": 2
      },
      {
        "x": 2,
        "y": 0.9528230226672629,
        "series": 2
      },
      {
        "x": 3,
        "y": 1.1790902509337027,
        "series": 2
      },
      {
        "x": 4,
        "y": 1.3709431861337658,
        "series": 2
      },
      {
        "x": 5,
        "y": 1.5484649771429377,
        "series": 2
      },
      {
        "x": 6,
        "y": 1.5936007146924656,
        "series": 2
      },
      {
        "x": 7,
        "y": 1.5565281321682678,
        "series": 2
      },
      {
        "x": 8,
        "y": 1.5324611327325905,
        "series": 2
      },
      {
        "x": 9,
        "y": 1.5132696097009746,
        "series": 2
      },
      {
        "x": 10,
        "y": 1.3909548760195327,
        "series": 2
      }
    ]
  }
]

希望有所帮助

nvd3，lineWithFocusChart表示时间序列数据无法正常显示

2 个答案: