获取天气预报数据以加载到 amcharts 数据加载器中
Getting the weather forecast data to load in amcharts dataloader
我对编程很陌生。所以请多多包涵。
我想使用 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,我无法简单地将类别字段和值字段替换为温度和降水量。
任何人都可以指导我如何去做这件事吗?任何潜在客户将不胜感激。
谢谢!
鉴于您的源 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
属性(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 使用上述 API 响应的静态 JSON 文件来说明这一点。我添加了一些其他生活质量设置,例如光标和设置精度。我建议查看 AmCharts API 文档以获取更多信息。
我对编程很陌生。所以请多多包涵。 我想使用 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,我无法简单地将类别字段和值字段替换为温度和降水量。
任何人都可以指导我如何去做这件事吗?任何潜在客户将不胜感激。 谢谢!
鉴于您的源 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
属性(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 使用上述 API 响应的静态 JSON 文件来说明这一点。我添加了一些其他生活质量设置,例如光标和设置精度。我建议查看 AmCharts API 文档以获取更多信息。