Question

我有一些数据我想用n3图表绘制，这就是我所拥有的。

$scope.options = {
          axes: {
            x: {
              key: "dateRecorded",
              type: "date",
              labelFunction: function(d) { return d3.time.format("%Y-%m-%d").parse(d); }
            },
            y: {type: "linear"}
          },
          series: [
            {
              y: "weight",
              key: "weight",
              label: "Weight",
              color: "#2ca02c"
            }
          ]
        };

这是我想要绘制的示例数据。

[{dateRecorded: "2015-04-15", weight: 15}, {dateRecorded: 2015-04-16, weight: 16}, {dateRecorded: "2015-04-17", weight: 17}]

图表显示但没有绘制数据。浏览器控制台输出以下内容。

TypeError: undefined is not a function
    at d3_time_parseFullYear

所以它无法正确解析日期，但我不确定我做错了什么。

任何帮助都将不胜感激。

Answer 1

这是一个数据问题，您的数据应该如下所示，然后标签就会正确显示。

[
 {dateRecorded: new Date("2015-04-15"), weight: 15},
 {dateRecorded: new Date("2015-04-16"), weight: 16},
 {dateRecorded: new Date("2015-04-17"), weight: 17}
]

为了使其正常工作，请从轴选项中删除以下行：

labelFunction: function(d) { return d3.time.format("%Y-%m-%d").parse(d);

请参阅有关类型的文档说明：

类型：可选，可以是＆＃39; date＆＃39;或者＆＃39;线性＆＃39; （默认为＆＃39;线性＆＃39;）。如果设置为＆＃39; date＆＃39;，则图表会将Date对象视为abscissas。图表本身没有进行任何转换，因此行为基本上是D3.js＆＃39;时间尺度。

不需要labelFunction。

Answer 2

删除labelFunction它是多余的 - 类型：日期足够

n3-charts绘制以日期为x轴的数据

2 个答案: