javascript - 使用外部 json 数据在画布 js 中渲染图形

Question

我正在尝试使用canvas.js. 图表需要从托管在本网站的外部 JSON 源呈现

http://gsx2json.com/api?id=1vc7wCjNXK39HMEYDkOJRMhQGPJpxMu4MJgTsydyLats

目标是根据 JSON 数据中的 2 个值绘制图表（例如，时间戳与纬度）

这是我到目前为止的代码：

$.getJSON("http://gsx2json.com/apiid=1vc7wCjNXK39HMEYDkOJRMhQGPJpxMu4MJgTsydyLats", function addData(data){


for (var i = 0; i < data.length; i++) {

    dataPoints.push({
        x: new Date(data[i].columns["timestamp"]),
        y: data[i].columns["latitude"]
    });
}

chart.render();


 // console.log(data.columns["timestamp"])

});

我正在使用 for 循环遍历 JSON 对象，然后使用 JSON 键访问数据。

当我运行此代码时，数据不会呈现。但是，当我尝试console.log (data.columns["latitude"])在 for 循环之外时，我能够访问我需要的数据。

任何帮助深表感谢。

谢谢。

标签： javascriptjqueryjsoncanvasjs

Answer 1

您正在安慰 data.columns[“latitude”]，它正在得到安慰，而在解析时，您将其视为 data[i].columns[“latitude”]，理想情况下应该是 data.columns[“latitude”][i]。在这种情况下，相应地解析从 JSON 接收的数据应该可以正常工作。

function addData(data) {
  for (var i = 0; i < data.columns["timestamp"].length; i++) {
    dataPoints.push({
      x: new Date(data.columns["timestamp"][i]),
      y: data.columns["latitude"][i]
    });
  }
  chart.render();
}

$.getJSON("https://api.myjson.com/bins/1eqjac", addData); //JSON has been stored in myjson.com due to CORS.

这是工作的JSFiddle