Sur cette page

Qml Weather

Il s'agit d'une démonstration de base montrant comment utiliser les différents types de graphiques en utilisant qml.

Capture d'écran montrant trois graphiques différents avec trois axes (température, date et précipitations), le premier décrivant la température maximale sous forme de graphique linéaire en bleu, le deuxième décrivant la température minimale, également sous forme de graphique linéaire en vert, et le troisième décrivant les précipitations sous forme de graphique à barres en orange.

Par défaut, l'application utilise des données de test statiques pour imiter les prévisions météorologiques. Vous pouvez également obtenir un identifiant d'application à partir de http://www.worldweatheronline.com/ pour accéder à l'API météo fournie par World Weather Online. Vous pouvez alors donner votre identifiant d'application comme paramètre à l'exécutable QML Weather pour qu'il utilise des données en direct.

En voici un exemple :

bin\qmlweather.exe 1234567890abcdef123456

Exécution de l'exemple

Pour exécuter l'exemple à partir de Qt Creatorouvrez le mode Welcome et sélectionnez l'exemple à partir de Examples. Pour plus d'informations, voir Qt Creator: Tutoriel : Construire et exécuter.

Utilisation de graphiques dans les applications Qt Quick

L'application d'exemple utilise un site ChartView et une série de données pour visualiser les données météorologiques :

ChartView {
    id: chartView
    title: "Weather forecast"
    BarCategoryAxis {
        id: barCategoriesAxis
        titleText: "Date"
    }

    ValueAxis{
        id: valueAxisY2
        min: 0
        max: 10
        titleText: "Rainfall [mm]"
    }

    ValueAxis {
        id: valueAxisX
        // Hide the value axis; it is only used to map the line series to bar categories axis
        visible: false
        min: 0
        max: 5
    }

    ValueAxis{
        id: valueAxisY
        min: 0
        max: 15
        titleText: "Temperature [°C]"
    }

    LineSeries {
        id: maxTempSeries
        axisX: valueAxisX
        axisY: valueAxisY
        name: "Max. temperature"
    }

    LineSeries {
        id: minTempSeries
        axisX: valueAxisX
        axisY: valueAxisY
        name: "Min. temperature"
    }

    BarSeries {
        id: myBarSeries
        axisX: barCategoriesAxis
        axisYRight: valueAxisY2
        BarSet {
            id: rainfallSet
            label: "Rainfall"
        }
    }

Pour obtenir des données sur les prévisions météorologiques, nous envoyons une requête HTTP GET à World Weather Online. Nous demandons la réponse au format JSON.

// Make HTTP GET request and parse the result
var xhr = new XMLHttpRequest;
xhr.open("GET",
         "http://free.worldweatheronline.com/feed/weather.ashx?q=Jyv%c3%a4skyl%c3%a4,Finland&format=json&num_of_days=5&key="
         + weatherAppKey);
xhr.onreadystatechange = function() {
    if (xhr.readyState == XMLHttpRequest.DONE) {
        var a = JSON.parse(xhr.responseText);
        parseWeatherData(a);
    }
}
xhr.send();

La réponse JSON contient un tableau de données de prévisions :

// Loop through the parsed JSON
for (var i in weatherData.data.weather) {
    var weatherObj = weatherData.data.weather[i];

Ce tableau est ensuite utilisé comme données d'entrée pour notre série et un ListModel que nous utilisons comme conteneur pour les URL des icônes météorologiques :

// Store temperature values, rainfall and weather icon.
// The temperature values begin from 0.5 instead of 0.0 to make the start from the
// middle of the rainfall bars. This makes the temperature lines visually better
// synchronized with the rainfall bars.
maxTempSeries.append(Number(i) + 0.5, weatherObj.tempMaxC);
minTempSeries.append(Number(i) + 0.5, weatherObj.tempMinC);
rainfallSet.append(weatherObj.precipMM);
weatherImageModel.append({"imageSource":weatherObj.weatherIconUrl[0].value});

Exemple de projet @ code.qt.io

© 2026 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.