QChart Themes示例解析二

何名取
274 阅读2分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第30天，点击查看活动详情

📒博客首页：何名取 的个人主页 - 文章 - 掘金 (juejin.cn)
🎉欢迎关注🔎点赞👍收藏⭐️留言📝
❤️期待一起交流！
🙏作者水平很有限，如果发现错误，求告知，多谢！
🌺有问题可私信交流！！！

前言

前面一节讨论了Chart Themes示例界面上的一些功能，本节则从代码方面进行拆解，从中进行学习。

image.png

代码分析

六个表

上图中有六个图表，在代码中对应的创建方式是这样的，以下代码在头文件中包含：

    QChart *createAreaChart() const;
    QChart *createBarChart(int valueCount) const;
    QChart *createPieChart() const;
    QChart *createLineChart() const;
    QChart *createSplineChart() const;
    QChart *createScatterChart() const;

分别是：

  • AreaChart区域图表
  • BarChart叠加图表
  • PieChart扇形图表
  • LineChart线性图表
  • SplineChart曲线图表
  • ScatterChart点状图表

另外在头文件中定义数据表非常值得一探究竟，以下是定义方式：

typedef QPair<QPointF, QString> Data;
typedef QList<Data> DataList;
typedef QList<DataList> DataTable;

这里先定义了点数据，使用QPair类，QPair类是一个模板类，它存储一对项值(key，value)。这里的Data存储的数据是点与其对应的数值。将其存储在一个list列表中形成DataList，再将DataList存储在list中可以形成一个数据表。

UI的设置

程序中切换不同UI的秘密就在这里：

        //![8]
        QPalette pal = window()->palette();
        if (theme == QChart::ChartThemeLight) {
            pal.setColor(QPalette::Window, QRgb(0xf0f0f0));
            pal.setColor(QPalette::WindowText, QRgb(0x404044));
        //![8]
        } else if (theme == QChart::ChartThemeDark) {
            pal.setColor(QPalette::Window, QRgb(0x121218));
            pal.setColor(QPalette::WindowText, QRgb(0xd6d6d6));
        } else if (theme == QChart::ChartThemeBlueCerulean) {
            pal.setColor(QPalette::Window, QRgb(0x40434a));
            pal.setColor(QPalette::WindowText, QRgb(0xd6d6d6));
        } else if (theme == QChart::ChartThemeBrownSand) {
            pal.setColor(QPalette::Window, QRgb(0x9e8965));
            pal.setColor(QPalette::WindowText, QRgb(0x404044));
        } else if (theme == QChart::ChartThemeBlueNcs) {
            pal.setColor(QPalette::Window, QRgb(0x018bba));
            pal.setColor(QPalette::WindowText, QRgb(0x404044));
        } else if (theme == QChart::ChartThemeHighContrast) {
            pal.setColor(QPalette::Window, QRgb(0xffab03));
            pal.setColor(QPalette::WindowText, QRgb(0x181818));
        } else if (theme == QChart::ChartThemeBlueIcy) {
            pal.setColor(QPalette::Window, QRgb(0xcee7f0));
            pal.setColor(QPalette::WindowText, QRgb(0x404044));
        } else {
            pal.setColor(QPalette::Window, QRgb(0xf0f0f0));
            pal.setColor(QPalette::WindowText, QRgb(0x404044));
        }
        window()->setPalette(pal);

这里的代码重复度非常高，意思就是选择哪个图表UI主题，则进行对应的颜色设置。另外从这些颜色中可以看到的是，同一组的颜色对比度都是非常明显的，这样可以在视觉上更好的展示图表数据。

后记

本示例中的其他部分代码就不完全贴上来了，有兴趣的读者可以自行去运行查看。通过学习这些示例，也能有非常大的收获。

avatar
文章
阅读
粉丝