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配合使用的复杂格式，因此您必须使用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;
    }
  },

现在已经映射了数据，您必须通过创建具有相应graph属性（valueField和{{1}的temperature对象来更新makeChart调用以查找那些属性。 }），将您的precipitation设置为categoryField，并创建一个date并启用categoryAxis并将parseDates设置为minPeriod的{{1}} 。您可能还想为您的降水值创建第二个值轴。

以下是更新的makeChart属性的摘要：

hh

这里是一个demo，使用上述API响应的静态JSON文件进行说明。我添加了其他一些生活质量设置，例如光标和设置精度。我建议查看AmCharts API文档以了解更多信息。

将天气预报数据加载到amcharts数据加载器中

1 个答案: