Qt Quick Ultralite 图表范例

Demonstrates how to use charts in Qt Quick Ultralite.

概述

The example shows how to use the Qt Charts for MCUs QML module. It contains two pages:

  • A simple grouped bar chart with mostly default settings and an animation on one bar, see BarChart.qml .
  • A complex transition between the two styled bar charts, see StyledBarChart.qml .

Choose between the two pages using the buttons at the bottom. On the Styled Bar page, select Month and Year to transition between charts.

目标平台

工程结构

CMake 工程文件

Set the FreeRTOS configTOTAL_HEAP_SIZE value to a sufficient value as the the chart images are drawn to heap memory.

...
if (OS STREQUAL "FreeRTOS")
    add_compile_definitions(configTOTAL_HEAP_SIZE=3145728)
endif()
...
							

Qul::QuickUltraliteCharts module is added to the target_link_libraries() CMake function call.

...
target_link_libraries(charts Qul::QuickUltraliteCharts Qul::QuickUltraliteControlsStyleDefault)
...
							
条形图表

BarChart.qml file describes the chart that's seen when the example starts.

It contains a single ChartView 采用 BarSeries , its axis definitions, and several BarSets .

import QtQuick 2.15
import QtCharts 2.15
ChartView {
    title: "Test plot"
    ...
    BarSeries {
        barWidth: 0.8
        axisX: BarCategoryAxis {
            labelsFont.pixelSize: 10
            BarCategoryValue { value: "2007" }
            BarCategoryValue { value: "2008" }
            BarCategoryValue { value: "2009" }
            BarCategoryValue { value: "2010" }
        }
        axisY: ValueAxis {
            labelsFont.pixelSize: 10
            labelFormat: "%.1f"
        }
        BarSet {
            BarSetValue {
                id: barVal1
                value: 1
                Behavior on value { NumberAnimation { duration: 1000 } }
            }
            BarSetValue { value: 2 }
            BarSetValue { value: 6 }
            BarSetValue { value: 3 }
        }
        BarSet {
        ...
							
样式化条形图表

This StyledBarChart.qml describes a bar chart, along with a transition between two different views, showing yearly and monthly data.

The transition is controlled by the toYear and toMonth animations, which have the following stages:

  • animating all bars going to zero while fading out the labels
  • switching the axis bounds and labels while they are invisible
  • animating the bars going to their final values while fading in the labels.

文件:

另请参阅 Qt Charts for MCUs QML 类型 .