このページでは

Qml Weather

これは、QMLを使用してさまざまなチャートタイプを活用する方法を示す基本的なデモです。

3つの軸(気温、日付、降水量)を持つ3つの異なるグラフを示すスクリーンショット。1つ目のグラフは最高気温を青色の折れ線グラフで、2つ目は最低気温を緑色の折れ線グラフで、3つ目は降水量をオレンジ色の棒グラフで表している。

デフォルトでは、アプリケーションは静的なテストデータを使用して天気予報をシミュレートします。また、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.