使用外部 json 数据在 canvas js 中渲染图形

Question

我正在尝试使用 canvas.js 渲染图表。图表需要从外部 JSON 来源呈现，该来源托管在本网站

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

objective 是根据 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 键访问数据。

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

非常感谢任何帮助。

谢谢。

Answer 1

我会建议如下。

$(function(){
  var points = [];

  $.getJSON("http://gsx2json.com/api?id=1vc7wCjNXK39HMEYDkOJRMhQGPJpxMu4MJgTsydyLats&columns=false", function(d){
    $.each(d.rows, function(i, r){
      points.push({
        x: new Date(r.timestamp),
        y: r.latitude
      });
    });
  }).fail(function(xhr, status, error) {
    console.log("Ajax Error", status, error);
  });

  var chart = new CanvasJS.Chart("chartContainer", {
    type: "line",
    data: [{
      dataPoints: points
    }]
  });
  chart.render();
});

由于CORS，这可能会遇到问题。

Due to browser security restrictions, most "Ajax" requests are subject to the same origin policy; the request can not successfully retrieve data from a different domain, subdomain, port, or protocol.

如果是这种情况，可以尝试使用 $.ajax() 并将 dataType 设置为 jsonp。也可以移动到 fetch() 替代。

查看返回的数据，使用 rows 可能更容易，因为您需要相应的 timestamp 和 latitude。这些专栏使这变得更加困难；您将同时迭代两个 columns.timestamp 数组和 columns.latitude 数组。因此 URL 的 &columns=false 部分有助于减少需要传回的数据。

希望对您有所帮助。

Answer 2

你正在安慰 data.columns[“latitude”] 得到安慰，而在解析时你将其视为 data[i].columns[“latitude”] 理想情况下应该是 data.columns [“纬度”][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

使用外部 json 数据在 canvas js 中渲染图形

Rendering graph in canvas js using external json data

javascript

jquery

json

canvasjs