QChart Themes示例解析二

前言

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

代码分析

六个表

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

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 Data;typedef QList DataList;typedef QList

这里先定义了点数据，使用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主题，则进行对应的颜色设置。另外从这些颜色中可以看到的是，同一组的颜色对比度都是非常明显的，这样可以在视觉上更好的展示图表数据。
后记
本示例中的其他部分代码就不完全贴上来了，有兴趣的读者可以自行去运行查看。通过学习这些示例，也能有非常大的收获。


作者：何名取
链接：https://juejin.cn/post/7114677596683501599
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。




原文始发于微信公众号（汇编语言）：QChart Themes示例解析二