En esta página

Qml Tiempo

Esta es una demostración básica que muestra cómo utilizar los diferentes tipos de gráficos mediante qml.

Captura de pantalla que muestra tres gráficos diferentes con tres ejes (Temperatura, Fecha y Precipitaciones) y el primero que describe la temperatura máxima como un gráfico de líneas en azul, el segundo que describe la temperatura mínima, también como un gráfico de líneas en verde y el tercero que describe las precipitaciones como un gráfico de barras en naranja.

Por defecto, la aplicación utiliza datos estáticos de prueba para imitar una previsión meteorológica. También puede obtener un identificador de aplicación de http://www.worldweatheronline.com/ para acceder a la API meteorológica proporcionada por World Weather Online. A continuación, puede dar su id de aplicación como parámetro al ejecutable Qml Weather para que utilice datos en tiempo real.

Por ejemplo

bin\qmlweather.exe 1234567890abcdef123456

Ejecutar el ejemplo

Para ejecutar el ejemplo desde Qt Creatorabra el modo Welcome y seleccione el ejemplo de Examples. Para más información, consulte Qt Creator: Tutorial: Construir y ejecutar.

Uso de Gráficos en Aplicaciones Qt Quick

La aplicación de ejemplo utiliza un ChartView y unas series para visualizar datos meteorológicos:

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"
        }
    }

Para obtener los datos con la previsión meteorológica, hacemos una petición HTTP GET a World Weather Online. Solicitamos la respuesta en formato de datos 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 respuesta JSON contiene una matriz de datos de previsión:

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

Que luego se utiliza como datos de entrada para nuestras series y un ListModel que utilizamos como contenedor para las URLs de los iconos meteorológicos:

// 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});

Proyecto de ejemplo @ 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.