QT usage charts

Table of contents

1. Concept

1.1 Coordinate axis-QAbstractAxis

1.2 Series-QAbstractSeries

1.3 Legend-Legend

1.4 Chart-QChart

1.5 View-QChartView

2. QT line chart

2.1 Introduction to Qt line chart

2.2 Qt line chart implementation

 

Qt chart is a control specially used for data visualization

Qt charts include line, pie, bar, scatter, range, etc.

When using Qt charts, you need to add Qt += charts

Include header files #include

1. Concept

1.1 Coordinate axis-QAbstractAxis

In charts, there are generally X and Y coordinate axes, and more complex ones also have a Z axis. Charts corresponding to Qt also have X and Y axis objects. But today, we won’t introduce it yet. If we do not create an object corresponding to the axis coordinates, we can use Qt's default axis object. We will introduce usage later.

1.2 Series-QAbstractSeries

Whether it is a curve, pie chart, bar chart or other chart, the content displayed in it is essentially data. A curve is a set of data, and a pie chart also corresponds to a set of data. In Qt Charts, these groups of data are called series. Qt provides different series corresponding to different types of charts. In addition to being responsible for storing and accessing data, series should also provide data drawing methods, such as line charts and curve charts corresponding to QLineSerie and QSPLineSerie respectively. We can use different series to achieve different display purposes.

1.3 Legend-Legend

Similar to Excel, legends are also provided in Qt Charts, and the legends can also be shown or hidden.

1.4 Chart-QChart

Qt provides the QChart class to encapsulate the previously mentioned content, such as coordinate axes, series, legends, etc. QChart assumes an organizational and management role. QChart derives from QGraphicsObject, so it is actually a primitive item. We can obtain axis objects, data series objects, legends, etc. from QChart, and can set the theme, background color and other style information of the chart.

1.5 View-QChartView

 Responsible for the display of QChart. QChart itself is only responsible for the organization and management of chart content. The display of the chart is handled by the view, which is QChartView. QChartView is derived from QGraphicsView, but it specifically provides several QChart-oriented interfaces, such as setChart (QChart*), etc.

---

2. QT line chart

2.1 Introduction to Qt line chart

 The class used by Qt line chart is QlineSeries.

Qt line chart contains the following parts: ① Coordinate axis (x, y) ② Line ③ Reference background line

2.2 Qt line chart implementation

The Qt line chart implementation process mainly includes the following steps:

1. Create a new QChart chart object chart;

2. Add coordinate axes (x, y axes) to the chart;

3. Promote a QWidget to QChartView in the ui as the view of the chart;

4. Add a new polyline object QLineSeries to the chart (multiple lines can be added)

5. Add data

6. Clear data

one. Create a new QChart chart object chart

QChart *chart = new QChart();
 chart->legend()->setVisible(true);
 QFont font;
 font.setPixelSize(50);
chart->setTitleFont(font);
 chart->setTitle("小红体重曲线");//设置图表标题

two. Add coordinate axes (x-axis, y-axis) to the chart

QValueAxis *axisX;
 axisX = new QValueAxis();
axisX->setTitleText("时间"); //设置坐标轴的标题
 axisX->setLabelFormat("%i"); //设置坐标格式，类似于 printf
axisX->setTickCount(10); //坐标被分成多少格
axisX->setRange(0, 60); //设置范围
//Bottom 是底部的意思,意思是坐标轴是放在底部的,也就是 X 轴
//相似的还有 Qt::AlignLeft...
chart->addAxis(axisX, Qt::AlignBottom);
QValueAxis *axisY;
 axisY = new QValueAxis();
 axisY->setTitleText("体重"); //设置坐标轴的标题
 axisY->setLabelFormat("%i"); //设置坐标格式
 axisY->setTickCount(5); //坐标被分成多少格
axisY->setRange(0, 200); //设置范围
chart->addAxis(axisY, Qt::AlignLeft);

three. Promote a QWidget into QChartView in the ui as the view of the chart;

Four. Add a new polyline object QLineSeries in the chart (multiple lines can be added)

line = new QLineSeries;
line->setName("体重曲线"); //设置线的名字
line->setColor(Qt::red); //设置线的颜色
 chart->addSeries(line); //把曲线加到图表里 //设置曲线遵循哪个坐标,它会自动
识别 x,y 轴,因为坐标轴里的 AlignBottom/AlignLeft 属性
line->attachAxis(axisX);
line->attachAxis(axisY);
ui->chartView->setChart(chart);//把拆线添加到控件

 five. Add data and simulate using timer

1. Timer initialization

QTimer *timer = new QTimer(this);
 connect(timer, SIGNAL(timeout()), this, SLOT(slotTimeout()));
x = 0;
 timer->start(1000);

2. Timer slot function

void Widget::doTimeoutSlot()
{
 y = qrand() % 200; //生成随机数,范围在 200 以内,因为我们 y 轴最大是 200
 qDebug()<<"y="<<y;
 if(x > 60){
x = 0;
 line->clear();
 }else{
 line->append(x, y);
 x++;
 }
}

six. Clear data line->clear();