彩票走势图

QML开发示例:天气图

翻译|使用教程|编辑:鲍佳佳|2021-08-03 11:12:24.317|阅读 154 次

概述:这是一个基本演示,展示了如何通过使用 qml 来使用不同的图表类型。

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

相关链接:

Qt技术交流交流群,QQ搜索群号“7654444821”加入

Qt组件推荐

  • QtitanRibbon |下载试用:遵循微软的Ribbon UI范式的Qt技术的丝带UI组件,研究为在Windows,Linux和Mac OS X上提供功能完整的丝带组件。
  • QtitanChart |下载试用:是一个C ++库,代表一组,这些控件使您可以快速地为

下载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",
         "//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”或者扫描二维码加入


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@cahobeh.cn

文章转载自:

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP