Metricsgraphics日期访问-折线图

Metricsgraphics Date access - Line graph

本文关键字：折线图 访问 日期 Metricsgraphics      更新时间：2023-09-26

我正在使用MetricsGraphic库进行D3可视化。出于某种原因，我不明白为什么我的日期解析不起作用。

d3.json('/api/data', function (data){
    data = MG.convert.date(data, "Date"["%d/%m/%y"]);
    MG.data_graphic({
        title: "Points per Matchday",
        description: "Points earned each matchday of 2014/2015 season",
        data: dataSet,
        width: 600,
        height: 200,
        right: 40,
        target: document.getElementById('arsenalPoints'),
        x_accessor: 'Date',
        y_accessor: 'Points'
    });
});

我一直收到一个类型错误，说它是can't read property of 'time' undefined和我的MG.convert.date函数。我也不知道我的日期格式是否正确。

下面是我的JSON示例：

{
    "Date" : "26/04/15",
    "HomeTeam" : "Arsenal",
    "AwayTeam" : "Chelsea",
    "FTR" : "D",
    "Points": 1
}

一种方法是使用MG:

这是错误的：

data = MG.convert.date(data, "Date"["%d/%m/%y"]);

这是正确的：

data = MG.convert.date(data, "Date", "%d/%m/%y");//its not an array

以下的完整代码

d3.json('/api/data', function (data){
    data = MG.convert.date(data, "Date", "%d/%m/%y");//its not an array
    MG.data_graphic({
        title: "Points per Matchday",
        description: "Points earned each matchday of 2014/2015 season",
        data: data, // Send in our data
        width: 600,
        height: 200,
        right: 40,
        target: document.getElementById('arsenalPoints'),
        x_accessor: 'Date',
        y_accessor: 'Points'
    });
});

另一种方法是使用d3:转换日期

d3.json('/api/data', function (data){
  data.forEach(function(j){
    j.Date = d3.time.format("%d/%m/%y").parse(j.Date);//convert it into date
  });
  MG.data_graphic({
        title: "Points per Matchday",
        description: "Points earned each matchday of 2014/2015 season",
        data: data, // Send in our data
        width: 600,
        height: 200,
        right: 40,
        target: document.getElementById('arsenalPoints'),
        x_accessor: 'Date',
        y_accessor: 'Points'
    });
});
相关文章：