minh họa

Ghi chú học tập được biên soạn khi sử dụng thư viện vẽ QCustomPlot để hỗ trợ phát triển. Để biết danh mục các bài viết trong cùng một loạt bài, hãy xem danh mục "Ghi chú học tập về Thư viện bản vẽ QCustomPlot". Bài viết này giới thiệu cách sử dụng QCustomPlot để vẽ đồ thị đường cong xy. Cần phải biết cả dữ liệu trục x và dữ liệu trục y. Phiên bản QCustomPlot được sử dụng trong ví dụ là Phiên bản 2.1.1 và phiên bản QT là 5.9.2.

1. Cấu hình dự án mẫu

Sử dụng thư viện vẽ QCustomPlot bằng cách bao gồm mã nguồn. Để biết chi tiết, vui lòng tham khảo phương pháp sử dụng (phương pháp mã nguồn) trong cùng một loạt bài viết. Ngoài ra, trang web chính thức của thư viện cung cấp mã mẫu để vẽ. Để biết chi tiết, hãy xem QCustomPlot - Giới thiệu. Gói nén đã tải xuống QCustomPlot.tar.gz cũng chứa mã kỹ thuật mẫu. Để biết chi tiết, hãy xem cùng loạt bài viết để tải xuống. Nội dung của tệp dự án ( demoQCP.pro ) được sử dụng trong ví dụ sau là:

                        
                          QT += core gui greaterThan(QT_MAJOR_VERSION, 4): QT += widget printsupport greaterThan(QT_MAJOR_VERSION, 4): CONFIG += c++11 lessThan(QT_MAJOR_VERSION, 5): QMAKE_CXXFLAGS += -std=c++11 MỤC TIÊU = demoQCP MẪU = ứng dụng NGUỒN += main.cpp\ qcustomplot.cpp TIÊU ĐỀ += qcustomplot.h

                        
                      

Khi thực sự sử dụng QCustomPlot để vẽ, thường cần phải thúc đẩy điều khiển QWidget trong giao diện UI tới QCustomPlot, sau đó gọi phương thức lớp của QCustomPlot theo cách con trỏ để vẽ hình ảnh. Phương pháp này hơi cồng kềnh khi sử dụng trong ví dụ (cần có tệp .ui). Để làm nổi bật các điểm chính của ví dụ và giảm sự phụ thuộc vào tệp, mã ví dụ trực tiếp khai báo một đối tượng QCustomPlot trong main.cpp. Các tệp cần thiết cho dự án ví dụ như sau. Chỉ cần bốn tệp. Nội dung tệp demoQCP.pro được đưa ra ở trên và nội dung tệp main.cpp sẽ được đưa ra sau. Hai tệp qcustomplot.h và qcustomplot.cpp có thể được tải xuống từ trang web chính thức.

Tệp main.cpp có cấu trúc như sau, demoPlot() chứa mã mẫu để viết biểu đồ.

                        
                          #include  #include  #include "qcustomplot.h" void demoPlot(QCustomPlot *customPlot) { // Vẽ mã mẫu } int main(int argc, char *argv[]) { QApplication a(argc, argv); QMainWindow window; // Sử dụng cửa sổ QCustomPlot làm cửa sổ trung tâm của QMainWindow QCustomPlot customPlot; window.setCentralWidget(&customPlot); // Vẽ demoPlot(&customPlot); // Hiển thị window.setWindowTitle(QStringLiteral("xy curve chart example @木三百川")); window.setGeometry(100, 100, 800, 600); window.show(); return a.exec(); }

                        
                      

Về việc làm đẹp màu vẽ, kiểu nét, phông chữ, đường lưới, v.v., tôi sẽ giới thiệu trong thư mục cùng loạt bài viết "Ghi chú học tập về Thư viện vẽ QCustomPlot". Nếu bạn muốn tìm hiểu, bạn có thể chú ý đến nó. Bài viết này chỉ giới thiệu phương pháp cơ bản để vẽ đồ thị đường cong xy.

2. Giới thiệu API phổ biến

Lớp được sử dụng để vẽ đồ thị đường cong xy là QCPGraph và các phương thức lớp mà lớp này cung cấp có thể được tìm thấy trong Tài liệu - QCPGraph. Các giao diện thường được sử dụng như sau:

                        
                          // Đặt lại/thêm giao diện dữ liệu bản vẽ void setData(const QVector &keys, const QVector &values, bool alreadySorted=false) void addData(const QVector &keys, const QVector &values, bool alreadySorted=false) void addData(double key, double value) // Đặt kiểu đường void setLineStyle(LineStyle ls) // Đặt kiểu điểm void setScatterStyle(const QCPScatterStyle &style)

                        
                      

3. Vẽ đường cong xy

Hàm demoPlot() như sau:

                        
                          void demoPlot(QCustomPlot *customPlot) { // Hiển thị trục ngang trên (xAxis2) và trục dọc bên phải (yAxis2), và giữ chúng đồng bộ với xAxis/yAxis customPlot->axisRect()->setupFullAxesBox(true); // Tạo dữ liệu xy, y=x^2, miền [-1,1] QVector x(101), y(101); for (int i = 0; i < 101; ++i) { x[i] = i/50.0 - 1; y[i] = x[i]*x[i]; } // Tạo đối tượng QCPGraph mới và thiết lập dữ liệu bản vẽ customPlot->addGraph(); customPlot->graph(0)->setData(x, y); // Đặt tiêu đề customPlot->plotLayout()->insertRow(0); customPlot->plotLayout()->addElement(0, 0, new QCPTextElement(customPlot, "Test-Title", QFont("sans", 17, QFont::Bold))); // Đặt nhãn trục customPlot->xAxis->setLabel("x"); customPlot->yAxis->setLabel("y"); // Đặt phạm vi trục customPlot->xAxis->setRange(-1, 1); customPlot->yAxis->setRange(0, 1); // Làm mới màn hình customPlot->replot(); }

                        
                      

Hiệu ứng vẽ:

4. Vẽ nhiều đường cong xy

Hàm demoPlot() như sau:

                        
                          void demoPlot(QCustomPlot *customPlot) { // Hiển thị trục ngang trên (xAxis2) và trục dọc bên phải (yAxis2), và giữ chúng đồng bộ với xAxis/yAxis customPlot->axisRect()->setupFullAxesBox(true); // Tạo dữ liệu xy, y1=x^2, y2=x^3, miền [-1,1] QVector x(101), y1(101), y2(101); for (int i = 0; i < 101; ++i) { x[i] = i/50.0 - 1; y1[i] = x[i]*x[i]; y2[i] = x[i]*x[i]*x[i]; } // Tạo đối tượng QCPGraph mới và thiết lập dữ liệu bản vẽ x-y1 customPlot->addGraph(); ->setData(x, y2); customPlot->graph(1)->setName(QStringLiteral("Cubic Curve Legend")); // Hiển thị chú giải customPlot->legend->setVisible(true); // Đặt tiêu đề customPlot->plotLayout()->insertRow(0); customPlot->plotLayout()->addElement(0, 0, new QCPTextElement(customPlot, "Test-Title", QFont("sans", 17, QFont::Bold))); // Đặt nhãn trục customPlot->xAxis->setLabel("x"); customPlot->yAxis->setLabel("y"); // Đặt phạm vi trục customPlot->xAxis->setRange(-1, 1); customPlot->yAxis->setRange(-1, 1); // Làm mới màn hình customPlot->replot(); }

                        
                      

Hiệu ứng vẽ:

5. Vẽ một đường cong xy quay trở lại

Ví dụ, nếu bạn cần vẽ đường cong \(x=(y+0.8)\times y\times (y-0.8),y\in [-1,1]\), có ba cách:

• Phương pháp 1: Tạo một cái mới Đồ thị QCPP Khi chỉ định một đối tượng yTrục vì trục chính , chỉ rõ Trục x vì giá trịTrục , tức là hoán đổi vai trò của các trục tọa độ. Đây là phương pháp đáng tin cậy nhất và được sử dụng phổ biến nhất.
• Phương pháp 2: Vẫn với Trục x vì trục chính , yTrục vì giá trịTrục (mặc định), nhưng gọi đặtDữ liệu() Khi bạn cần truyền tham số thứ ba ĐÚNG VẬY . Đây là một cách tiếp cận lười biếng và bản vẽ Dữ liệu trục ngang (keyAxis) Phải đáp ứng một số điều kiện nhất định: Dữ liệu chính Đầu tiên phải tăng rồi mới giảm, và không được bỏ đi khi giảm. khóaDữ liệu[0] Quá gần nếu không bản vẽ sẽ sai.
• Phương pháp 3: Xuất địa chỉ bộ nhớ của dữ liệu bản vẽ và ghi dữ liệu trực tiếp vào bộ nhớ. Phương pháp này thường được sử dụng để cải thiện hiệu suất của QCustomPlot và rút ngắn thời gian cập nhật dữ liệu. Tuy nhiên, khi sử dụng phương pháp này để vẽ đường cong xy ngược, dữ liệu trục ngang của bản vẽ cũng cần đáp ứng các điều kiện trên, nếu không bản vẽ sẽ bị sai.

Khi vòng lặp được tạo thành bởi đường cong rất phức tạp, nó thường được biểu diễn bằng cách vẽ một đường cong tham số. Để biết chi tiết, hãy xem Tài liệu - QCPCurve hoặc các bài viết của tôi trong cùng một loạt bài.

5.1 Phương pháp đáng tin cậy: hoán đổi trục xy

Hàm demoPlot() như sau:

                        
                          void demoPlot(QCustomPlot *customPlot) { // Hiển thị trục ngang trên (xAxis2) và trục dọc bên phải (yAxis2), và giữ chúng đồng bộ với xAxis/yAxis customPlot->axisRect()->setupFullAxesBox(true); // Tạo dữ liệu yx, x=(y+0.8)*y*(y-0.8), miền [-1,1] QVector x(101), y(101); for (int i = 0; i < 101; ++i) { y[i] = i/50.0 - 1; x[i] = (y[i]+0.8)*y[i]*(y[i]-0.8); } // Tạo một đối tượng QCPGraph mới (hoán đổi xAxis/yAxis) và thiết lập dữ liệu bản vẽ customPlot->addGraph(customPlot->yAxis, customPlot->xAxis); customPlot->graph(0)->setData(y, x); // Đặt tiêu đề customPlot->plotLayout()->insertRow(0); customPlot->plotLayout()->addElement(0, 0, new QCPTextElement(customPlot, "Test-Title", QFont("sans", 17, QFont::Bold))); // Đặt nhãn trục customPlot->xAxis->setLabel("x"); customPlot->yAxis->setLabel("y"); // Đặt phạm vi trục customPlot->xAxis->setRange(-0.5, 0.5); customPlot->yAxis->setRange(-1, 1); // Làm mới màn hình customPlot->replot(); }

                        
                      

Hiệu ứng vẽ:

5.2 Phương pháp lười biếng: đặt alreadySorted = true

Hàm demoPlot() như sau:

                        
                          void demoPlot(QCustomPlot *customPlot) { // Hiển thị trục ngang trên cùng (xAxis2) và trục dọc bên phải (yAxis2), và giữ chúng đồng bộ với xAxis/yAxis customPlot->axisRect()->setupFullAxesBox(true); // Tạo dữ liệu yx, x=(y+0.8)*y*(y-0.8), miền [-1,1] QVector x(101), y(101); for (int i = 0; i < 101; ++i) { y[i] = i/50.0 - 1; x[i] = (y[i]+0.8)*y[i]*(y[i]-0.8); } // Tạo một đối tượng QCPGraph mới, thiết lập dữ liệu bản vẽ và alreadySorted = true customPlot->addGraph(); customPlot->graph(0)->setData(x, y, true); // Đặt tiêu đề customPlot->plotLayout()->insertRow(0); customPlot->plotLayout()->addElement(0, 0, new QCPTextElement(customPlot, "Test-Title", QFont("sans", 17, QFont::Bold))); // Đặt nhãn trục customPlot->xAxis->setLabel("x"); customPlot->yAxis->setLabel("y"); // Đặt phạm vi trục customPlot->xAxis->setRange(-0.5, 0.5); customPlot->yAxis->setRange(-1, 1); // Làm mới màn hình customPlot->replot(); }

                        
                      

Hiệu ứng vẽ:

Lưu ý rằng trong hình này, keyData (trục ngang) thỏa mãn điều kiện tăng trước rồi giảm sau, giá trị nhỏ nhất khi giảm (khoảng -0,197) lớn hơn keyData[0] (khoảng -0,360) nên không có lỗi khi vẽ. Nếu bạn quan tâm, bạn có thể dùng thử và xem hiệu ứng vẽ khi dữ liệu trục ngang giảm và gần với keyData[0].

5.3 Phương pháp thay thế: xuất địa chỉ bộ nhớ dữ liệu bản vẽ

Để biết chi tiết về cách xuất địa chỉ bộ nhớ của dữ liệu bản vẽ một chiều, vui lòng xem bài viết khác của tôi [QCustomPlot] Cải thiện hiệu suất và sửa đổi mã nguồn (Phiên bản V2.xx). Hàm demoPlot() như sau:

                        
                          void demoPlot(QCustomPlot *customPlot) { // Hiển thị trục ngang trên (xAxis2) và trục dọc bên phải (yAxis2), và giữ chúng đồng bộ với xAxis/yAxis customPlot->axisRect()->setupFullAxesBox(true); // Tạo một đối tượng QCPGraph mới, lấy địa chỉ bộ nhớ của dữ liệu bản vẽ và thiết lập dữ liệu bản vẽ customPlot->addGraph(); QVector *mData = customPlot->graph(0)->data()->coreData(); mData->reserve(101); mData->resize(101); for (int i = 0; i < 101; ++i) { double y = i/50.0 - 1; (*mData)[i].key = (y+0.8)*y*(y-0.8); (*mData)[i].value = y; } // Đặt tiêu đề customPlot->plotLayout()->insertRow(0); customPlot->plotLayout()->addElement(0, 0, new QCPTextElement(customPlot, "Test-Title", QFont("sans", 17, QFont::Bold))); // Đặt nhãn trục customPlot->xAxis->setLabel("x"); customPlot->yAxis->setLabel("y"); // Đặt phạm vi trục customPlot->xAxis->setRange(-0.5, 0.5); customPlot->yAxis->setRange(-1, 1); // Làm mới màn hình customPlot->replot(); }

                        
                      

Hiệu ứng vẽ:

6. Vẽ đường cong xy của khoảng cách gián đoạn

Khi có NaN trong dữ liệu keyAxis, bản vẽ đường cong sẽ có hiệu ứng ngắt quãng khoảng cách. Hàm demoPlot() như sau:

                        
                          void demoPlot(QCustomPlot *customPlot) { // Hiển thị trục ngang trên cùng (xAxis2) và trục dọc bên phải (yAxis2), và giữ chúng đồng bộ với xAxis/yAxis customPlot->axisRect()->setupFullAxesBox(true); // Tạo dữ liệu xy, y=x^2, miền [-1,1] QVector x(101), y(101); for (int i = 0; i < 101; ++i) { x[i] = i/50.0 - 1; y[i] = x[i]*x[i]; } y[30] = qQNaN(); y[60] = std::numeric_limits::quiet_NaN(); // Tạo đối tượng QCPGraph mới và thiết lập dữ liệu bản vẽ customPlot->addGraph(); customPlot->graph(0)->setData(x, y); // Đặt tiêu đề customPlot->plotLayout()->insertRow(0); customPlot->plotLayout()->addElement(0, 0, new QCPTextElement(customPlot, "Test-Title", QFont("sans", 17, QFont::Bold))); // Đặt nhãn trục customPlot->xAxis->setLabel("x"); customPlot->yAxis->setLabel("y"); // Đặt phạm vi trục customPlot->xAxis->setRange(-1, 1); customPlot->yAxis->setRange(0, 1); // Làm mới màn hình customPlot->replot(); }

                        
                      

Hiệu ứng vẽ:

Cuối cùng, bài viết này về [QCustomPlot] vẽ đồ thị đường cong xy ở đây. Nếu bạn muốn biết thêm về [QCustomPlot] vẽ đồ thị đường cong xy, vui lòng tìm kiếm các bài viết CFSDN hoặc tiếp tục duyệt các bài viết liên quan. Tôi hy vọng bạn sẽ ủng hộ blog của tôi trong tương lai! .