이 페이지에서

Qml Weather

이 페이지는 QML을 사용하여 다양한 차트 유형을 활용하는 방법을 보여주는 기본 데모입니다.

세 개의 축(기온, 날짜, 강수량)을 가진 세 가지 서로 다른 차트를 보여주는 스크린샷으로, 첫 번째 차트는 최고 기온을 파란색 선 그래프로, 두 번째 차트는 최저 기온을 녹색 선 그래프로, 세 번째 차트는 강수량을 주황색 막대 그래프로 나타내고 있다.

기본적으로 이 애플리케이션은 일기 예보를 재현하기 위해 정적 테스트 데이터를 사용합니다. 또한 http://www.worldweatheronline.com/에서 애플리케이션 ID를 발급받아 World Weather Online에서 제공하는 일기 예보 API에 접속할 수 있습니다. 그런 다음 Qml Weather 실행 파일에 애플리케이션 ID를 매개변수로 전달하여 실시간 데이터를 사용하도록 설정할 수 있습니다.

예를 들어:

bin\qmlweather.exe 1234567890abcdef123456

예제 실행

다음 위치에서 예제를 실행할 수 있습니다:

Qt Quick 애플리케이션에서 차트 사용하기

이 예제 애플리케이션은 ChartView와 몇 가지 시리즈를 사용하여 날씨 데이터를 시각화합니다:

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

일기 예보 데이터를 가져오기 위해 World Weather Online에 HTTP GET 요청을 보냅니다. 응답은 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();

JSON 응답에는 일기 예보 데이터 배열이 포함되어 있습니다:

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

이 데이터는 시리즈의 입력 데이터로 사용되며, 날씨 아이콘 URL을 담는 용도로 ListModel에 활용됩니다:

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

코드 예제 프로젝트 @ 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.