Question

我正在尝试获取基本的NVD3图表，这是代码片段。

$scope.options = {
    chart: {
      type: 'stackedAreaChart',
      height: 450,
      margin : {
        top: 20,
        right: 20,
        bottom: 30,
        left: 40
      },
      x: function(d){ return Date(d[1]);},
      y: function(d){return d[0];},
      useVoronoi: false,
      clipEdge: true,
      duration: 0,
      useInteractiveGuideline: true,
      xScale: d3.time.scale(),
      xAxis: {
        showMaxMin: false,
        tickFormat: function(d) {
            return d3.time.format('%x')(new Date(d));
        }
      },
      yAxis: {
        tickFormat: function(d){
          return d;
        }
      }
    }
  };

输入图表的数据如下：

$scope.data = [
    {
      "key" : "mac1" ,
      "values" : [ [ 5000 , "2016-02-03T11:07:58.940Z"] , [ 5200 , "2016-02-03T11:08:09.862Z"] ]
    }
  ];

图表中没有线条或堆积区域。

X轴是时间序列，日期为1970年1月1日。

我不确定我哪里出错了。请帮忙吗？

一些类似的stackoverflow问题没有帮助 -

nvd3 date formatting

Answer 1

我做的错误就是这个，x: function(d){ return Date(d[1]);}这一行会返回日期格式，而我又在tickFormat中重新格式化日期。

更改为x: function(d){ return d[1];}有助于图表显示在屏幕上。

我也尝试修改duration: 100但图表无法从服务器刷新。这里有什么帮助吗？

nvd3时间序列图未被绘制

1 个答案: