javascript - ChartJS - 来自 JSON 的时间图

标签 javascript json chart.js

我正在将 JSON 返回到我的 View ,并且我想解析折线图上的日期,但在使用 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 轴上吗?谢谢。

最佳答案

日期初始化出错:

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"]};
 });

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

关于javascript - ChartJS - 来自 JSON 的时间图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44748076/

相关文章:

javascript - 为什么这个 puppeteer 的异步函数语法?

javascript - 从 Chrome 扩展获取数据

php - Laravel 在 MySQL 中使用 JSON

chart.js - 在 ChartJS 中的条形图上显示数据标签

javascript - 用 JS 显示一个随机的 css Sprite

javascript - 在 React Router v4 中的嵌套交换机之间移动

json - 有没有在不声明结构的情况下将编码结构作为 JSON 发送?

javascript - javascriptreact.json 文件中的自定义 react 代码片段在 vscode 中不起作用

javascript - Charts.js 图例大于 View 值(value)

javascript - 缩短 Charts.js 中的数字标签