[移动开发]Qt界面开发案例：图表主题示例

Qt是一个跨平台框架，通常用作图形工具包，它不仅创建CLI应用程序中非常有用。而且它也可以在三种主要的台式机操作系统以及移动操作系统（如Symbian，Nokia Belle，Meego Harmattan，MeeGo或BB10）以及嵌入式设备，Android（Necessitas）和iOS的端口上运行。现在我们为你提供了免费的试用版。

下载Qt6最新试用版

Qt组件推荐：

• QtitanRibbon|?下载试用:?遵循Microsoft Ribbon UI Paradigm for Qt技术的Ribbon UI组件，致力于为Windows、Linux和Mac OS X提供功能完整的Ribbon组件。
• QtitanChart?|?下载试用?:是一个C ++库，代表一组控件，这些控件使您可以快速地为应用程序提供漂亮而丰富的图表。并且支持所有主要的桌面

该示例显示了不同内置主题的外观。此示例显示了某些受支持图表类型的不同内置主题的外观。

运行示例

要从Qt Creator运行示例，请打开欢迎模式并从示例中选择示例。有关更多信息，请访问构建和运行示例。

创建图表

不同类型的图表分别生成并添加到布局中。例如，折线图创建如下。其他图表类型的创建与此类似。

首先创建一个图表。

QChart *chart = new QChart();
chart->setTitle("Line chart");

生成一组通用的随机数据并将其放置在列表中。此列表用于每个图表类型以将数据添加到图表系列。对于线系列，创建QLineSeries实例并将其添加到图表中。

QString name("Series ");
int nameIndex = 0;
for (const DataList &list : m_dataTable) {
    QLineSeries *series = new QLineSeries(chart);
    for (const Data &data : list)
        series->append(data.first);
    series->setName(name + QString::number(nameIndex));
    nameIndex++;
    chart->addSeries(series);
}

为线系列创建默认轴。我们还根据用于系列的数据范围指定轴的范围。

chart->createDefaultAxes();
chart->axes(Qt::Horizontal).first()->setRange(0, m_valueMax);
chart->axes(Qt::Vertical).first()->setRange(0, m_valueCount);

我们还想在标签和 y 轴之间添加更多空间。为此，我们指定了一种向标签添加空格字符的标签格式。

// Add space to label to add space between labels and axis
QValueAxis *axisY = qobject_cast<QValueAxis*>(chartchart->axes((Qt::Vertical)).first());());
Q_ASSERT(axisY);(axisY);
axisY->setLabelFormat(("%.1f  ");

最后将折线图添加到网格布局中。

chartView = new QChartView(createLineChart());createLineChart());
m_ui->gridLayout->addWidget(chartView(chartView, 1, 2);

改变主题

用户可以选择要在示例中使用的内置主题。然后将此主题应用于布局中的所有图表。

QChart::ChartTheme theme  theme = static_cast<QChart::ChartTheme>(
            m_ui->themeComboBox->itemData(m_ui(m_ui->themeComboBox->currentIndex())()).toInt());());
chartView->chart()()->setTheme(theme);(theme);

为了使结果看起来更和谐，应用程序的背景调色板被自定义以匹配所选主题。该QPalette ::窗口和QPalette :: WindowText角色基于所选主题设置。

QPalette pal = window()()->palette();
();
if (theme (theme == QChart::ChartThemeLight) {) {
    pal.setColor((QPalette::Window, QRgb(0xf0f0f0));
    pal.setColor((QPalette::WindowText, QRgb(0x404044));

更改动画、图例和抗锯齿

在此示例中，还可以查看更改动画、图例和抗锯齿如何影响图表的外观。

根据用户的选择，在每个图表上设置使用的动画类型。图表中可能没有动画，或者有网格轴或系列的动画，或者两者都有。

QChart::AnimationOptions options( options(
            m_ui->animatedComboBox->itemData(m_ui(m_ui->animatedComboBox->currentIndex())()).toInt());
());
if ((!m_charts.isEmpty() () && m_charts.at((0)->chart()()->animationOptions() () != options) {
    ) {
    for ((QChartView *chartView : charts): charts)
        chartView->chart()()->setAnimationOptions(options);(options);
}}

图表可以用图例显示。图例可以与图表的不同侧对齐。

Qt::Alignment alignment( alignment(
            m_ui->legendComboBox->itemData(m_ui(m_ui->legendComboBox->currentIndex())()).toInt());());

if ((!alignment) {
    ) {
    for ((QChartView *chartView : charts): charts)
        chartView->chart()()->legend()()->hide();();
} } else {
    {
    for ((QChartView *chartView : charts) {: charts) {
        chartView->chart()()->legend()()->setAlignment(alignment);(alignment);
        chartView->chart()()->legend()()->show();();
    }}
}}

用户还可以查看更改抗锯齿选项如何更改图表的外观。抗锯齿根据用户的选择进行更新。

bool checked  checked = m_ui->antialiasCheckBox->isChecked();
();
for ((QChartView *chart : charts): charts)
    chart->setRenderHint((QPainter::Antialiasing, checked);checked);

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

想要了解或购买Qt正版授权的朋友，欢迎咨询慧都官方客服

Qt技术交流群现已开通，QQ搜索群号“765444821”或者扫描下方二维码即可加入