本地和不同的折线图使用NVD3的远程json文件

时间:2014-08-12 11:48:13

标签: javascript json d3.js charts nvd3.js

我已经使用NVD3创建了一个折线图,然而,发生了一些非常奇怪的事情。当我创建cahrt local并在我的机器上使用json文件对其进行测试时,我能够获得包含两个系列的折线图。当我将d3.json url更改为指向Web服务API时,它仅返回包含一个系列的折线图。两个排除我的测试文件不同我复制了服务api返回的json将其保存到本地文件并仍然返回2个系列。

奇怪的是,相同的数据显示不同。任何可能导致这种情况的想法?

我的代码

d3.json("json/test.json", function(error, data) {
    nv.addGraph(function() {
        var chart = nv.models.lineChart()
            .x(function(d) { return d.timestamp; })
            .y(function(d) { return d.value/100; })
            .useInteractiveGuideline(true)
            .isArea(true)
            //.forceY([0]);
        chart.xAxis
            .showMaxMin(true)
            .tickFormat(function(d) { return d3.time.format('%X')(new Date(d)); });
        chart.yAxis
            .axisLabel('Response Time(ms)')
            .tickFormat(d3.format(',.2f'));
        d3.select('#qosChart1 svg')
            .datum(data.seriesSet)
            .transition().duration(500)
            .call(chart);
        nv.utils.windowResize(chart.update);
        return chart;
    });
});

数据样本

{
  "seriesSet": [
    {
      "key": "VAS response time",
      "disabled": false,
      "values": [
        {
          "timestamp": 1406800800000,
          "value": "10.0"
        },
        {
          "timestamp": 1406800860000,
          "value": "10.823879"
        }
        ....
      ]
    },
    {
      "key": "Bob's activities",
      "disabled": true,
      "values": [
        {
          "timestamp": 1406800800000,
          "value": null
        },
        {
          "timestamp": 1406800860000,
          "value": null
        }
        ....
      ]
    }
  ]
}

1 个答案:

答案 0 :(得分:0)

抱歉 NVD3没有问题 ...问题在于服务API查询和服务器提供的响应