Question

我正在向我的视图返回一个JSON，我想在折线图上解析日期，但是我在使用ChartJS添加日期时遇到了一些问题。

这是我的JSON格式:(可以更改）

[
  { "y": 4, "x": "2017-01-01" },
  { "y": 0, "x": "2017-01-02" },
  { "y": 9, "x": "2017-01-03" },
  { "y": 0, "x": "2017-01-04" },
  { "y": 14, "x": "2017-01-05" }
]

我试过这个，但不断获取随机时间戳

data: {
  labels: [],
  datasets: [{
    data: [{
      y: 0,
      x: new Date('2017,03,01')
    }, {
      y: 1,
      x: new Date('2017,03,02')
    }, {
      y: 2,
      x: new Date('2017,03,03')
    }],
    label: "test",

有没有人知道如何在x轴上放置正确的日期并将值放在y轴上？感谢。

Answer 1

日期初始化时出错：

new Date('2017,03,01')

应替换为

new Date(2017,03,01)

（不带引号），因为'2017,03,01'是一个日期格式无效的字符串。您可以使用具有以下格式的字符串初始化Date对象（与输入相同）：

 new Date('2017-03-01')

为了转换输入的json，你可以编写一个这样的函数：

 var input = [{"y":4,"x":"2017-01-01"},
              {"y":0,"x":"2017-01-02"},
              {"y":9,"x":"2017-01-03"}, 
              {"y":0,"x":"2017-01-04"},
              {"y":14,"x":"2017-01-05"}];

 var data = input.map(function(item) {
      return {x: new Date(item["x"]), y: item["y"]};
 });

并将数据传递到您的图表。

Answer 2

按原样使用json数据，但告诉chart.js x轴是时间。 working fiddle

options: {
 "scales": {
  "xAxes": [{
    "type": "time"
  }]
 }
}

有关更多时间轴配置选项，请参阅http://www.chartjs.org/docs/latest/axes/cartesian/time.html。特别是解析器（tick）属性，如果使用各种时间和日期格式。

ChartJS - JSON的时间图

2 个答案: