QT tips QChart chart demo

素颜马尾好姑娘i 2022-07-18 00:18 207阅读 0赞

Qt Charts模块提供了一套易于使用的图表组件。它采用了Qt Graphics View框架，因此图表可以很容易地集成到现代的用户界面。 Qt Charts可以被用作QWidgets、QGraphicsWidget、或QML类型。用户可以方便地通过选择图表主题之一来创建令人印象深刻的图表。

--------------------

[作者：一去丶二三里 ][Link 1]

<table> 
 <thead> 
  <tr> 
   <th align="left">例子</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">AreaChart Example</td> 
   <td align="left">这个示例展示了如何创建一个简单的面积图。</td> 
  </tr> 
  <tr> 
   <td align="left">Audio Example</td> 
   <td align="left">这个示例展示了动态数据的图形(麦克风输入)。</td> 
  </tr> 
  <tr> 
   <td align="left">BarChart Example</td> 
   <td align="left">这个示例展示了如何创建一个柱状图。</td> 
  </tr> 
  <tr> 
   <td align="left">BarModelMapper Example</td> 
   <td align="left">这个示例展示了如何使用QAbstractItemModel派生model作为柱状系列的数据。</td> 
  </tr> 
  <tr> 
   <td align="left">Box and Whiskers Example</td> 
   <td align="left">这个示例展示了如何创建一个盒须（box-and-whiskers）图。</td> 
  </tr> 
  <tr> 
   <td align="left">Callout Example</td> 
   <td align="left">这个示例展示了如何在图表上绘制一个额外的元素(callout)。</td> 
  </tr> 
  <tr> 
   <td align="left">Chart Themes Example</td> 
   <td align="left">这个示例展示了不同的内置主题的外观和感觉。</td> 
  </tr> 
  <tr> 
   <td align="left">Custom Chart Example</td> 
   <td align="left">这个示例展示了如何定制图表上不同元素的外观。</td> 
  </tr> 
  <tr> 
   <td align="left">DateTimeAxis Example</td> 
   <td align="left">这个示例展示了如何利用QDateTimeAxis使用QLineChart。</td> 
  </tr> 
  <tr> 
   <td align="left">Donut Chart Breakdown Example</td> 
   <td align="left">这个示例展示了如何使用使用QPieSeries API创建一个圆环分解图。</td> 
  </tr> 
  <tr> 
   <td align="left">Donutchart Example</td> 
   <td align="left">这个示例展示了如何创建一个简单的圆环图,并对其中一片进行定制。</td> 
  </tr> 
  <tr> 
   <td align="left">Dynamic Spline Example</td> 
   <td align="left">这个示例展示了如何绘制动态数据。</td> 
  </tr> 
  <tr> 
   <td align="left">HorizontalBarChart Example</td> 
   <td align="left">这个示例展示了如何创建一个水平柱状图。</td> 
  </tr> 
  <tr> 
   <td align="left">HorizontalPercentBarChart Example</td> 
   <td align="left">这个示例展示了如何创建一个简单的水平百分比柱状图。</td> 
  </tr> 
  <tr> 
   <td align="left">HorizontalStackedBarChart Example</td> 
   <td align="left">这个示例展示了如何创建一个简单的堆叠（stacked）水平条形图。</td> 
  </tr> 
  <tr> 
   <td align="left">Legend Example</td> 
   <td align="left">这个示例展示了如何分离图例以及如何附加回去。</td> 
  </tr> 
  <tr> 
   <td align="left">LegendMarkers Example</td> 
   <td align="left">这个示例展示了如何利用图例标记。</td> 
  </tr> 
  <tr> 
   <td align="left">Line and BarChart Example</td> 
   <td align="left">这个示例展示了如何结合不同的图表以及设置轴线。</td> 
  </tr> 
  <tr> 
   <td align="left">LineChart Example</td> 
   <td align="left">这个示例展示了如何创建一个简单的折线图。</td> 
  </tr> 
  <tr> 
   <td align="left">Logarithmic Axis Example</td> 
   <td align="left">这个示例展示了如何使用QLogValueAxis。</td> 
  </tr> 
  <tr> 
   <td align="left">Model Data Example</td> 
   <td align="left">这个示例展示了如何使用QAbstractItemModel派生模型作为series的数据。</td> 
  </tr> 
  <tr> 
   <td align="left">Multiple Axes Example</td> 
   <td align="left">这个示例展示了如何创建一个有两个垂直轴的简单图表，每个series一个。</td> 
  </tr> 
  <tr> 
   <td align="left">Nested Donuts Example</td> 
   <td align="left">这个示例展示了如何使用QPieSeries API创建一个嵌套的圆环图。</td> 
  </tr> 
  <tr> 
   <td align="left">OpenGL Accelerated Series Example</td> 
   <td align="left">这个示例展示了如何启用OpenGL加速QLineSeries和QScatterSeries。</td> 
  </tr> 
  <tr> 
   <td align="left">PercentBarChart Example</td> 
   <td align="left">这个示例展示了如何创建一个简单的百分比柱状图。</td> 
  </tr> 
  <tr> 
   <td align="left">Pie Chart Customization Example</td> 
   <td align="left">这个示例展示如何定制饼图的外观和感觉。</td> 
  </tr> 
  <tr> 
   <td align="left">Piechart Drilldown Example</td> 
   <td align="left">这个示例展示了如何实现一个有drilldown效果的饼状图。</td> 
  </tr> 
  <tr> 
   <td align="left">Piechart Example</td> 
   <td align="left">这个示例展示了如何创建一个简单的饼状图和并且定制一些饼片。</td> 
  </tr> 
  <tr> 
   <td align="left">Polar Chart Example</td> 
   <td align="left">这个示例展示了如何用多个不同的series创建一个简单的极坐标图。</td> 
  </tr> 
  <tr> 
   <td align="left">Qml Axes</td> 
   <td align="left">这个示例展示了如何在你的QML应用程序使用轴线。</td> 
  </tr> 
  <tr> 
   <td align="left">Qml Charts Example</td> 
   <td align="left">这个示例展示了如何通过使用使用qml使用不同的图表类型。</td> 
  </tr> 
  <tr> 
   <td align="left">Qml Custom Legend</td> 
   <td align="left">这个示例展示了如何创建自定义的图例。</td> 
  </tr> 
  <tr> 
   <td align="left">Qml Customizations</td> 
   <td align="left">这个示例展示了如何定制一个ChartView和series的不同视觉属性。</td> 
  </tr> 
  <tr> 
   <td align="left">Qml F1 Legends</td> 
   <td align="left">这个示例展示了如何使用XmlListModel作为一个图表的数据源。</td> 
  </tr> 
  <tr> 
   <td align="left">Qml Oscilloscope</td> 
   <td align="left">这个示例展示了如何使用Qt Charts QML API来实现严格性能要求的应用程序。</td> 
  </tr> 
  <tr> 
   <td align="left">Qml Polar Chart</td> 
   <td align="left">这个示例展示了如何使用一个极坐标图在你的QML应用程序中。</td> 
  </tr> 
  <tr> 
   <td align="left">Qml Weather</td> 
   <td align="left">这个示例展示了如何使用不同的图表类型通过使用qml。</td> 
  </tr> 
  <tr> 
   <td align="left">Scatter Interactions Example</td> 
   <td align="left">这个示例展示了如何创建一个简单的散布图和交互图以及如何与之交互。</td> 
  </tr> 
  <tr> 
   <td align="left">ScatterChart Example</td> 
   <td align="left">这个示例展示了如何创建一个简单的散布图。</td> 
  </tr> 
  <tr> 
   <td align="left">SplineChart Example</td> 
   <td align="left">这个示例展示了如何创建一个简单的曲线图。</td> 
  </tr> 
  <tr> 
   <td align="left">StackedBarChart Drilldown Example</td> 
   <td align="left">这个示例展示了如何使用一个stacked柱状图来实现drilldown。</td> 
  </tr> 
  <tr> 
   <td align="left">StackedBarChart Example</td> 
   <td align="left">这个示例展示了如何创建一个简单的stacked柱状图。</td> 
  </tr> 
  <tr> 
   <td align="left">Temperature Records Example</td> 
   <td align="left">这个示例展示了如何创建一个带有负图的柱状图。</td> 
  </tr> 
  <tr> 
   <td align="left">Zoom Line Example</td> 
   <td align="left"></td> 
  </tr> 
 </tbody> 
</table>

--------------------

对应的官方demo [http://doc.qt.io/qt-5/qtcharts-index.html][http_doc.qt.io_qt-5_qtcharts-index.html]

--------------------

pro文件添加

QT += charts

.h文件添加

/*QtChart的地方需要包含#include <QtCharts>以及命名空间using namespace QtCharts;
     * （或者QT_CHARTS_USE_NAMESPACE替代using namespace QtCharts;）
     * 但是ui_widget文件是自动生成的，不能再此文件里进行修改，此文件是包含在widget.h的一个叫Ui的命名空间中
     * 所以把
     * #include <QtCharts>
     * QT_CHARTS_USE_NAMESPACE
     * 放在.h文件里面
    */
    #include <QtCharts>
    QT_CHARTS_USE_NAMESPACE

--------------------

[Custom Chart Example 这个示例展示了如何定制图表上不同元素的外观。][Custom Chart Example]

#include <QApplication>
    #include <QtWidgets/QApplication>
    #include <QtWidgets/QMainWindow>
    #include <QtCharts/QChartView>
    #include <QtCharts/QLineSeries>
    #include <QtCharts/QCategoryAxis>
    #include <QtCharts>
    using namespace QtCharts;
    
    int main(int argc, char *argv[])
    {
        QApplication a(argc, argv);
    
        QLineSeries *series = new QLineSeries();
        *series << QPointF(0, 6) << QPointF(9, 4) << QPointF(15, 20) << QPointF(25, 12) << QPointF(29, 26);
        QChart *chart = new QChart();
        chart->legend()->hide();
        chart->addSeries(series);
    
        //定制曲线的颜色宽度 Customize series
        QPen pen(QRgb(0x02550));
        pen.setWidth(2);
        series->setPen(pen);
    
        //自定义Chart字体颜色等 Customize chart title
        QFont font;
        font.setPixelSize(18);
        chart->setTitleFont(font);
        chart->setTitleBrush(QBrush(Qt::white));
        chart->setTitle("Customchart example");
    
        //自定义Chart背景 Customize chart background
        QLinearGradient backgroundGradient;
        backgroundGradient.setStart(QPointF(0, 0));
        backgroundGradient.setFinalStop(QPointF(0, 1));
        backgroundGradient.setColorAt(0.0, QRgb(0xd2d0d1));
        backgroundGradient.setColorAt(1.0, QRgb(0x4c4547));
        backgroundGradient.setCoordinateMode(QGradient::ObjectBoundingMode);
        chart->setBackgroundBrush(backgroundGradient);
    
        //自定义绘图的背景 Customize plot area background
        QLinearGradient plotAreaGradient;
        plotAreaGradient.setStart(QPointF(0, 1));
        plotAreaGradient.setFinalStop(QPointF(1, 0));
        plotAreaGradient.setColorAt(0.0, QRgb(0x555555));
        plotAreaGradient.setColorAt(1.0, QRgb(0x55aa55));
        plotAreaGradient.setCoordinateMode(QGradient::ObjectBoundingMode);
        chart->setPlotAreaBackgroundBrush(plotAreaGradient);
        chart->setPlotAreaBackgroundVisible(true);
    
        QCategoryAxis *axisX = new QCategoryAxis();
        QCategoryAxis *axisY = new QCategoryAxis();
    
        //自定义XY轴字体 Customize axis label font
        QFont labelsFont;
        labelsFont.setPixelSize(12);
        axisX->setLabelsFont(labelsFont);
        axisY->setLabelsFont(labelsFont);
    
        //自定义XY轴颜色 Customize axis colors
        QPen axisPen(QRgb(0xFFB400));//黄色
        axisPen.setWidth(2);
        axisX->setLinePen(axisPen);
        axisY->setLinePen(axisPen);
    
        //自定义XY轴上显示的label的颜色 Customize axis label colors
        QBrush axisBrush(Qt::red);
        axisX->setLabelsBrush(axisBrush);
        axisY->setLabelsBrush(axisBrush);
    
        //自定义网格线和阴影 Customize grid lines and shades
        axisX->setGridLineVisible(false);
        axisY->setGridLineVisible(false);
        axisY->setShadesPen(Qt::NoPen);
        axisY->setShadesBrush(QBrush(QColor(0x99, 0xcc, 0xcc, 0x55)));
        axisY->setShadesVisible(true);
    
        axisX->append("low", 10);
        axisX->append("optimal", 20);
        axisX->append("high", 30);
        axisX->setRange(0, 30);
    
        axisY->append("slow", 10);
        axisY->append("med", 20);
        axisY->append("fast", 30);
        axisY->setRange(0, 30);
    
        chart->setAxisX(axisX, series);
        chart->setAxisY(axisY, series);
    
        QChartView *chartView = new QChartView(chart);
        chartView->setRenderHint(QPainter::Antialiasing);
    
        QMainWindow window;
        window.setCentralWidget(chartView);
        window.resize(400, 300);
        window.show();
    
    
        return a.exec();
    }

![这里写图片描述][20160905153711527]

[Link 1]: http://blog.csdn.net/liang19890820/article/details/52210175
[http_doc.qt.io_qt-5_qtcharts-index.html]: http://doc.qt.io/qt-5/qtcharts-index.html
[Custom Chart Example]: http://doc.qt.io/qt-5/qtcharts-customchart-example.html
[20160905153711527]: /images/20220717/ded4009e00a8480c80c1c7802b254c61.png