Визуализация графика в Canvas JS с использованием внешних данных JSON - PullRequest
Новая
       7

Визуализация графика в Canvas JS с использованием внешних данных JSON

0 голосов
/ 05 февраля 2019

Я пытаюсь визуализировать графики, используя canvas.js.Диаграммы должны отображаться из внешнего источника JSON, который размещен на этом веб-сайте

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

Цель состоит в том, чтобы построить график из двух значений в данных JSON (т.е.Например, отметка времени и широта)

Это код, который у меня есть: 

$.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, я могу получить доступ к нужным мне данным.

Любая помощь очень ценится.

Спасибо.

Ответы [ 2 ]

0 голосов
/ 06 февраля 2019

Вы утешаете data.columns [«широта»], которая становится утешенной, тогда как при разборе вы рассматриваете ее как data [i] .columns [«широта»], которая в идеале должна быть data.columns [«широта»] [я].В этом случае синтаксический анализ данных, полученных из 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

0 голосов
/ 05 февраля 2019

Я бы посоветовал что-то вроде следующего. 

$(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.

Из-за ограничений безопасности браузера большинство запросов "Ajax" подчиняются той же политике происхождения ;запрос не может успешно получить данные из другого домена, субдомена, порта или протокола.

Если это так, можно попробовать с помощью $.ajax() и установить dataType на jsonp.Можно также перейти к fetch() альтернатива.

Глядя на возвращенные данные, можно было бы проще использовать rows, поскольку вам нужны соответствующие timestamp и latitude.Колонны усложняют это;вам нужно будет выполнить итерацию массива columns.timestamp одновременно с массивом columns.latitude.Следовательно, часть &columns=false URL-адреса помогает сократить объем данных, которые необходимо передать обратно.

Надеюсь, это поможет.

...