Получение данных прогноза погоды для загрузки в загрузчик данных amcharts

Question

Я очень новичок в программировании.Поэтому, пожалуйста, потерпите меня.Я хочу показать данные прогноза погоды в реальном времени, в частности, температуру и количество осадков в зависимости от времени, используя графики.Данные о погоде я беру с openweathermap.org.Пример: "https://samples.openweathermap.org/data/2.5/forecast?q=M%C3%BCnchen,DE&appid=b6907d289e10d714a6e88b30761fae22" И я хочу использовать его в следующем примере стандартных amcharts с загрузчиком данных.

var chart = AmCharts.makeChart("chartdiv", {
        "type": "serial",
        "theme": "dark",
        "dataLoader": {
          "url": "data/serial2.json",
          "showErrors": true,
          "complete": function ( chart ) {
            console.log( "Loading complete" );
          },
          "load": function ( options, chart ) {
            console.log( "File loaded: ", options.url );
          },
          "error": function ( options, chart ) {
            console.log( "Error occured loading file: ", options.url );
          }
        },
        "categoryField": "year",
        "startDuration": 1,
        "rotate": false,
        "categoryAxis": {
          "gridPosition": "start"
        },
        "valueAxes": [{
          "position": "top",
          "title": "Million USD",
          "minorGridEnabled": true
        }],
        "graphs": [{
          "type": "column",
          "title": "Income",
          "valueField": "income",
          "fillAlphas":1,
          "balloonText": "<span style='font-size:13px;'>[[title]] in [[category]]:<b>[[value]]</b></span>"
        }, {
          "type": "line",
          "title": "Expenses",
          "valueField": "expenses",
          "lineThickness": 2,
          "bullet": "round",
          "balloonText": "<span style='font-size:13px;'>[[title]] in [[category]]:<b>[[value]]</b></span>"
        }],
        "legend": {
          "useGraphSettings": true
        },
        "creditsPosition": "top-right",
        "responsive": {
          "enabled": true
        }
      });

      function reloadData() {
        chart.dataLoader.loadData();
      }
    

Проблема, с которой я сталкиваюсь, состоит в том, что данные о погоде представляют собой сложный json, и я не могу просто заменить поле категории и значения на температуру и количество осадков.

Кто-нибудь может подсказать мне, как это сделать?Любое руководство будет высоко ценится.Спасибо!

Answer 1

Учитывая, что ваш исходный JSON имеет сложный формат, который напрямую не работает с AmCharts, вы должны использовать обратный вызов postProcess dataLoader, чтобы получить ответ и адаптировать его к вашим потребностям.Если вы посмотрите на пример документации отклика API * openweathermap , вы увидите, что она отображает каждое поле и то, что ему соответствует.Основные свойства, представляющие интерес: main.temp, dt, rain.3h и snow.3h.Вы захотите извлечь эту информацию для каждой точки и назначить ее вашему массиву.В вашем ответе API каждая точка находится в массиве list, поэтому вы захотите пройти через это.

Вот как будет выглядеть метод postProcess:

  "dataLoader": {
    "url": "YOUR API URL HERE",
    "postProcess": function(jsonData) { 
      var newData = []; //dataProvider for your chart

      //loop through your API response's list array for the data you need
      jsonData.list.forEach(function(periodInfo) {
        //set up the data point with the converted timestamp,
        //converted temperature, and placeholder for precipitation
        var dataPoint = {
          "date": periodInfo.dt * 1000, //convert to milliseconds
          "temperature": periodInfo.main.temp - 273.15, //convert kelvin to celsius
          "precipitation": 0
        };
        //check if we have a value for rain precipitation before adding it to our precipitation property
        if (periodInfo.rain !== undefined && periodInfo.rain['3h'] !== undefined) {
          dataPoint.precipitation += periodInfo.rain['3h'];
        }
        //check if we have a value for snow precipitation before adding it in
        if (periodInfo.snow !== undefined && periodInfo.snow['3h'] !== undefined) {
          dataPoint.precipitation += periodInfo.snow['3h'];
        }
        //finally, add it to your new data array
        newData.push(dataPoint);
      });
      //return the new array to be assigned to the chart's dataProvider
      return newData;
    }
  },

Теперьу вас есть сопоставленные данные, вы должны обновить вызов makeChart для поиска этих свойств, создав graph объекты с соответствующими свойствами valueField (temperature и precipitation), установив для categoryField значение dateи создайте categoryAxis с включенным parseDates и minPeriod, установленным на hh, поскольку данные являются почасовыми.Возможно, вы также захотите создать вторую ось значений для значений осадков.

Вот фрагмент обновленных свойств makeChart:

  //create value axes for both temperature and precip values
  "valueAxes": [{
    "id": "temperature",
    "title": "Temperature (C)"
  }, {
    "id": "precipitation",
    "title": "Precipitation (mm)",
    "position": "right"
  }],
  "synchronizeGrid": true, //make sure the grids from both axes are synchronized
  "graphs": [{
    "bullet": "round",
    "valueField": "temperature"
  },{
    "fillAlphas": 0.9,
    "lineAlpha": 0.2,
    "type": "column",
    "valueField": "precipitation",
    "valueAxis": "precipitation" //plot this against the precipitation value axis
  }],
  "categoryField": "date",
  "categoryAxis": {
    "parseDates": true,
    "minPeriod": "hh" //make sure we plot hourly data correctly
  },

Вот demo с использованиемстатический JSON-файл вышеуказанного API-ответа, чтобы проиллюстрировать это.Я добавил некоторые другие настройки качества жизни, такие как курсор и настройка точности.Я рекомендую ознакомиться с документацией по AmCharts API для получения дополнительной информации.