nvd3,时间序列数据的lineWithFocusChart无法正确显示

Madasu K

在我的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];
                            });
                        });
shabeer90

我不确定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
      }
    ]
  }
]

希望能帮助到你

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

nvd3,时间序列数据的lineWithFocusChart无法正确显示

来自分类Dev

nvd3时间H:M:S在轴上显示不正确

来自分类Dev

nvd3时间H:M:S在轴上显示不正确

来自分类Dev

nvd3图形无法在Firefox中正确加载

来自分类Dev

在Flexdashboard上显示nvd3 rChart

来自分类Dev

NVD3-使用修改后的JSON数据的图形无法正确显示

来自分类Dev

nvd3多条形图带有堆叠选项,条形显示不正确

来自分类Dev

如何转换时间范围以小时而非日期显示?(nvd3图表)

来自分类Dev

为NVD3图表选择数据

来自分类Dev

NVD3图表在隐藏选项卡中无法正确呈现

来自分类Dev

nvd3 烛台图表不显示自定义数据

来自分类Dev

NVD3.js突出显示时间序列中的时间戳

来自分类Dev

nvd3持续时间不影响饼图

来自分类Dev

rCharts中的multiBarChart(nvd3)未显示

来自分类Dev

NVD3工具提示仅显示类别

来自分类Dev

NVD3折线图显示X轴

来自分类Dev

NVD3工具提示仅显示类别

来自分类Dev

多图(NVD3)x轴标签不显示

来自分类Dev

以角度NVD3多图表显示月份名称

来自分类Dev

重点部分显示错误图表 (NVD3)

来自分类Dev

无法更改图例符号nvd3气泡图

来自分类Dev

无法水平绘制参考线nvd3气泡图

来自分类Dev

无法在R Shiny中渲染rcharts / nvd3图

来自分类Dev

无法水平绘制参考线nvd3气泡图

来自分类Dev

从Flask传递nvd3图表的数据作为参数

来自分类Dev

NVD3中的ScatterChart –从csv文件读取数据

来自分类Dev

将Json数据加载到nvd3图形中

来自分类Dev

读取NVD3中的multiBarHorizontalChart的csv数据吗?

来自分类Dev

nvd3 / svg没有更新为新数据