在Qt 和VS 两者中均可以使用QChart,我在这里是用VS上的Qt。
Qt里:
如果只在Qt使用的话,需要QT跟新组件加入QChart。然后在.pro配置文件中加入 QT += charts 并在使用的.h头文件上边加上 using namespace Qtcharts或者一个宏 QT_CHARTS_USE_NAMESPACE
VS里:
在VS上的话,需要配置一下,详细过程方参考:
(其实就是把显示的widget 提升为 QChartView, 然后配置一下路径即可)
https://blog.csdn.net/qq_28080659/article/details/78914373
在头文件.h中
加上这三个:
#include <QtCharts>
#include <QChartView>
#include <QLineSeries>
如果使用一个线条的话,直接
QLineSeries*series;
如果好几个线条的话,用数组
*QList<QLineSeries >seriesArr;
其他图形原理一样。 这个series就是就坐标轴上的那个图形(可以是线条,也可以是柱状图等等,记住,其实就2个东西,一个是画坐标轴,另一个是在坐标轴上显示你要的数据图)
接下来在.cpp文件中
- 创建一个QChart, 并把标签隐藏掉。隐藏不隐藏无所谓,个人喜好。
QChart *chart = new QChart();
chart->legend()->hide();
- 然后画数据线条,就是你想在你的chart上显示的图形,刚刚我们在.h文件中声明的那个series,现在拿过来用就好(先一个线条)。
series->append(0.0);
series->append(1,1); //坐标x,y为 (0, 0)和(1,1)两个点的连线。
若果你想加线条宽度和颜色 ,就用setPen
series->setPen(QPen(Qt::blue, 8, Qt::SolidLine)); //颜色是蓝色,宽度是8.
- 现在数据线条画好了,把他加到chart当中。
chart->addSeries(series);
chart->createDefaultAxes(); //不加这个默认坐标不行的。
这里我还是建议你自己画个坐标轴,这样子对X,Y轴处理比较方便。坐标轴操作如下:
//set X axis
QValueAxis *axisX = new QValueAxis();
axisX->setTickCount(7); //这个是间隔数量,就是在范围的tick数量。
axisX->setRange(-10, 10); //这里是x轴的范围,从-10到10.
axisX->setLabelFormat("%d"); //显示标签的形式,我这里设置为整数。
axisX->setTitleText("x轴的title");
axisX->setTitleBrush(QBrush(Qt::white)); //设置title的颜色
axisX->setLabelsColor(Qt::white); //设置X轴的label颜色
axisX->setGridLineVisible(false); //显示网格与否。
chart->setAxisX(axisX, series); // 把以上所设定的X轴的东西 全部加到chart里!!!!
//set Y axis 这里设置y轴,其实和上边的原理一样。
QValueAxis *axisY = new QValueAxis();
axisY->setTickCount(23);
axisY->setRange(-20, 200);
axisY->setLabelFormat("%d");
axisY->setLabelsColor(Qt::white);
axisY->setGridLineVisible(false);
chart->setAxisY(axisY, series);
然后把这个chart,显示在ui界面中的里边,(就是此文章最上边,你在ui界面中提升的那个wiget为QChartView的东西)
//若果你想设置一下你画的这个chart背景颜色就用:
chart->setBackgroundBrush(Qt::black);
ui->chartPic->setChart(chart);
总结一下,其实很简单:
- 画数据图(可以是线条,柱状图,大饼图等)
- 设置坐标
- 创建一个QChart * chart 然后把1和2的东西加到chart里。
chart->addSeries(…) 和 chart->setAxisX(…) , chart->setAxisY(…) - 在你想要的ui位置里显示就好了。
Note:其他样式的图,原理都是这样子的哦。 可以百度查查看如何声明和使用其他图形。