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.


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 类型 .