Qt技術交流交流群，QQ搜索群號“7654444821”加入

Qt組件推薦

下載Qt6最新試用版

這是一個基本的演示，展示了如何通過使用 qml 來使用不同的圖表類型。

默認情況下，應用程序使用動態測試數據來模擬天氣。您還可以從 //www.worldweatheronline.com/ 獲取應用程序 ID，以訪問 World Weather Online 提供的天氣 API。然后，您可以將您的應用程序 ID 作為參數提供給 Qml Weather 可執行文件，以便使用實時數據。

例如：

bin\qmlweather .exe 1234567890abcdef123456

運行示例

要從 Qt Creator 運行示例，請打開歡迎模式并從示例中選擇示例。有關更多信息，請訪問

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

為了獲取與環境數據的數據，我們以 JSON 數據格式請求響應。

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響應包含一組預測數據：

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(i, weatherObj.precipMM);
weatherImageModel.append({"imageSource":weatherObj.weatherIconUrl[0].value});

================================================== ==

想要了解或購買Qt正版授權的朋友，歡迎

Qt技術交流交流群開放，QQ搜索群號“7654444821”或者掃描二維碼加入