javascript - 获取天气预报数据以加载到 amcharts 数据加载器中

Question

我对编程很陌生。所以请多多包涵。我想使用 amcharts 显示实时天气预报数据，特别是温度和降水量与时间段的关系。我从 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 一起使用，您必须使用 dataLoader 的 postProcess 回调来获取响应并使其适应您的需求。如果您查看 openweathermap sample API response documentation ，您会看到它映射出每个字段及其对应的内容。感兴趣的主要属性是: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 调用以通过创建具有相应 valueField 属性的 graph 对象来查找这些属性(温度 和 precipitation)，将您的 categoryField 设置为 date 并使用 parseDates 创建一个 categoryAxis 启用并将 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使用上述 API 响应的静态 JSON 文件来说明这一点。我添加了一些其他生活质量设置，例如光标和设置精度。我建议查看 AmCharts API 文档以获取更多信息。