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

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

Вот как postProcess метод postProcess:

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

      //loop through your API response 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 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
  },

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