Qt編寫自定義控制項25-自定義QCustomPlot
一、前言
上次在寫大屏數據可視化電子看板系統時候，提到過改造QCustomPlot來實現柱狀分組圖、橫向柱狀圖、橫向分組圖、滑鼠懸停提示等。這次單獨列出來描述，有很多人疑問為啥不用QChart，或者echart等形式，其實這兩種方式我都嘗試過，比如Qt5.7以後新增的QChart模塊，曲線這塊，支持數據量很小，而且用法極其不適應，非常彆扭，尤其是10W以上數據量的支持，簡直是渣渣，優點也是有很多的，比如動畫效果，我看過他的完整源碼，動畫這塊處理的非常好，連坐標軸都可以有動畫效果，而且支持很多種效果，而且內置了很多套theme皮膚，省去了很多渣渣審美的程序員自己來配色，這個倒是挺方便的。而對於echart，必須依賴瀏覽器控制項，資源佔用比較高，後面決定採用改造QCustomPlot來實現用戶需要的各種圖表效果。
在整個改造的過程中，全部封裝成易用的函數，傳入參數即可，同時還支持全局樣式更改，支持樣式表控制整體顏色更改，考慮了很多細節，比如彈出懸停信息的位置等，都自動計算顯示在最佳最合理位置。考慮到很多人用的QCustomPlot1.0，特意還做了QCustomPlot1.0和2.0的完全兼容。
二、實現的功能
* 1:可設置X軸Y軸範圍值
* 2:可設置背景顏色+文本顏色+網格顏色
* 3:可設置三條曲線顏色+顏色集合
* 4:可設置是否顯示定位十字線,可分別設置橫向和縱向
* 5:可設置十字線的寬度和顏色
* 6:可設置是否顯示數據點以及數據點的大小
* 7:可設置是否填充背景形成面積圖
* 8:可設置模式-拖動+縮放等
* 9:可設置坐標軸間距+第二坐標系可見
* 10:提供介面setDataLine直接設置曲線,支持多條
* 11:提供介面setDataBar直接設置柱狀圖,支持多條形成堆積圖
* 12:提供介面setLabs設置文本標籤替代key
* 13:提供清空+重繪介面+外部獲取QCustomPlot對象
* 14:提供函數start+stop來模擬正弦曲線
* 15:可設置柱狀圖的值的位置+精確度+顏色
* 16:支持滑鼠移動到數據點高亮顯示數據點以及顯示數據提示信息
* 17:可設置提示信息位置 自動處理+頂部+右上角+右側+右下角+底部+左下角+左側+左上角
* 18:可設置是否校驗數據產生不同的背景顏色,比如柱狀圖的每根柱子都可以根據數據生成不同背景顏色
* 19:可設置是否顯示圖例+圖例位置+圖例行數
* 20:支持多條曲線+柱狀圖+柱狀分組圖+橫向柱狀圖+橫向柱狀分組圖+柱狀堆積圖
* 21:內置15套精美顏色,自動取顏色集合的顏色,省去配色的煩惱
* 22:同時支持 QCustomPlot 1.0 和 QCustomPlot 2.0
三、效果圖
四、核心代碼
void CustomPlot::setDataLine(int index, const QString &name, const QVector<double> &key, const QVector<double> &value)
{
if (customPlot->graphCount() > index) {
customPlot->graph(index)->setName(name);
customPlot->graph(index)->setData(key, value);
customPlot->xAxis->setRange(-offsetX, key.count() + offsetX, Qt::AlignLeft);
//超過3條線條顏色設置顏色集合的顏色
if (index >= 3) {
setColor(index, colors.at(index));
} else {
setColor(0, colors.at(0));
setColor(1, colors.at(1));
setColor(2, colors.at(2));
}
}
}
void CustomPlot::setDataBarv(const QStringList &rowNames,
const QStringList &columnNames,
const QList<QVector<double> > &values,
const QColor &borderColor,
int valuePosition,
int valuePrecision,
const QColor &valueColor,
bool checkData)
{
//只有1列的才能設置
if (columnNames.count() != 1) {
return;
}
//可以直接用堆積圖,因為只有一列的柱狀圖不會形成堆積
setDataBars(rowNames, columnNames, values, borderColor, valuePosition, valuePrecision, valueColor, checkData);
}
void CustomPlot::setDataBarvs(const QStringList &rowNames,
const QStringList &columnNames,
const QList<QVector<double> > &values,
const QColor &borderColor,
int valuePosition,
int valuePrecision,
const QColor &valueColor,
bool checkData)
{
//過濾個數不一致數據,防止索引越界
int rowCount = rowNames.count();
int columnCount = columnNames.count();
int valueCount = values.count();
if (columnCount == 0 || valueCount == 0 || columnCount != valueCount) {
return;
}
//設置網格線不顯示,會更好看
customPlot->xAxis->grid()->setVisible(false);
//customPlot->yAxis->grid()->setVisible(false);
//設置橫坐標文字描述
QVector<double> ticks;
QVector<QString> labels;
int count = rowCount * columnCount;
for (int i = 0; i < rowCount; i++) {
ticks << 1.5 + (i * columnCount);
labels << rowNames.at(i);
}
setLabX(ticks, labels);
customPlot->xAxis->setRange(0, count + 1);
for (int i = 0; i < columnCount; i++) {
//同樣也要先過濾個數是否符合要求
QVector<double> value = values.at(i);
if (rowCount != value.count()) {
continue;
}
//創建柱狀圖
CustomBarv *bar = new CustomBarv(customPlot->xAxis, customPlot->yAxis);
bar->setCheckData(checkData);
//設置寬度比例
bar->setWidth(0.9);
//設置顯示值的位置 0-不繪製 1-頂部上面 2-頂部居中 3-中間居中 4-底部居中
bar->setValuePostion(valuePosition);
bar->setValuePrecision(valuePrecision);
bar->setValueColor(valueColor);
//設置名稱
bar->setName(columnNames.at(i));
//設置顏色,取顏色集合
QColor color = QColor(51, 204, 255);
if (i < colors.count()) {
color = colors.at(i);
}
//邊緣高亮,如果傳入了邊框顏色則取邊框顏色
bar->setPen(QPen(borderColor == Qt::transparent ? color.light(150) : borderColor));
bar->setBrush(color);
//這個演算法很巧妙,想了很久
QVector<double> ticks;
double offset = i * 0.9;
for (int j = 0; j < rowCount; j++) {
ticks << 1.0 + (j * columnCount) + offset;
}
//設置數據
bar->setData(ticks, value);
}
}
void CustomPlot::setDataBarh(const QStringList &rowNames,
const QStringList &columnNames,
const QList<QVector<double> > &values,
const QColor &borderColor,
int valuePosition,
int valuePrecision,
const QColor &valueColor,
bool checkData)
{
//只有1列的才能設置
if (columnNames.count() != 1) {
return;
}
//過濾個數不一致數據,防止索引越界
int rowCount = rowNames.count();
int columnCount = columnNames.count();
int valueCount = values.count();
if (columnCount == 0 || valueCount == 0 || columnCount != valueCount) {
return;
}
//設置網格線不顯示,會更好看
customPlot->xAxis->grid()->setVisible(false);
customPlot->yAxis->grid()->setVisible(false);
customPlot->yAxis->setTickLength(0, 0);
//設置橫坐標文字描述
QVector<double> ticks;
QVector<QString> labels;
int count = rowCount * columnCount;
double padding = 1;
for (int i = 0; i < rowCount; i++) {
ticks << padding + (i * columnCount);
labels << rowNames.at(i);
}
setLabY(ticks, labels);
customPlot->yAxis->setRange(0, count + 1);
//先計算出每個柱子佔用的高度
double barHeight = 0.7;
for (int i = 0; i < columnCount; i++) {
//同樣也要先過濾個數是否符合要求
QVector<double> value = values.at(i);
if (rowCount != value.count()) {
continue;
}
//先繪製系列1的數據,再繪製系列2,依次類推
for (int j = 0; j < rowCount; j++) {
//創建橫向柱狀圖
double y = (0.67 + (j * columnCount));
CustomBarh *bar = new CustomBarh(customPlot);
bar->setCheckData(checkData);
bar->setRect(QPointF(0, y), QPointF(value.at(j), y + barHeight));
bar->setValue(value.at(j));
//設置顯示值的位置 0-不繪製 1-頂部上面 2-頂部居中 3-中間居中 4-底部居中
bar->setValuePostion(valuePosition);
bar->setValuePrecision(valuePrecision);
bar->setValueColor(valueColor);
//設置顏色,取顏色集合
QColor color = QColor(51, 204, 255);
if (i < colors.count()) {
color = colors.at(i);
}
//邊緣高亮,如果傳入了邊框顏色則取邊框顏色
bar->setPen(QPen(borderColor == Qt::transparent ? color.light(150) : borderColor));
bar->setBrush(color);
}
}
}
void CustomPlot::setDataBarhs(const QStringList &rowNames,
const QStringList &columnNames,
const QList<QVector<double> > &values,
const QColor &borderColor,
int valuePosition,
int valuePrecision,
const QColor &valueColor,
bool checkData)
{
//過濾個數不一致數據,防止索引越界
int rowCount = rowNames.count();
int columnCount = columnNames.count();
int valueCount = values.count();
if (columnCount == 0 || valueCount == 0 || columnCount != valueCount) {
return;
}
//設置網格線不顯示,會更好看
customPlot->xAxis->grid()->setVisible(false);
customPlot->yAxis->grid()->setVisible(false);
customPlot->yAxis->setTickLength(0, 0);
customPlot->xAxis->setVisible(false);
//設置橫坐標文字描述
QVector<double> ticks;
QVector<QString> labels;
int count = rowCount * columnCount;
//這個演算法想了很久,很牛逼
double padding = 1.5 + (columnCount - 2) * 0.4;
for (int i = 0; i < rowCount; i++) {
ticks << padding + (i * columnCount);
labels << rowNames.at(i);
}
setLabY(ticks, labels);
customPlot->yAxis->setRange(0, count + 1);
//先計算出每個柱子佔用的高度
double barHeight = 0.8;
for (int i = 0; i < columnCount; i++) {
//同樣也要先過濾個數是否符合要求
QVector<double> value = values.at(i);
if (rowCount != value.count()) {
continue;
}
//先繪製系列1的數據,再繪製系列2,依次類推
for (int j = 0; j < rowCount; j++) {
//創建橫向柱狀圖
double y = (0.7 + i * barHeight + (j * columnCount));
CustomBarh *bar = new CustomBarh(customPlot);
bar->setCheckData(checkData);
bar->setRect(QPointF(0, y), QPointF(value.at(j), y + barHeight));
bar->setValue(value.at(j));
//設置顯示值的位置 0-不繪製 1-頂部上面 2-頂部居中 3-中間居中 4-底部居中
bar->setValuePostion(valuePosition);
bar->setValuePrecision(valuePrecision);
bar->setValueColor(valueColor);
//設置顏色,取顏色集合
QColor color = QColor(51, 204, 255);
if (j < colors.count()) {
color = colors.at(j);
}
//邊緣高亮,如果傳入了邊框顏色則取邊框顏色
bar->setPen(QPen(borderColor == Qt::transparent ? color.light(150) : borderColor));
bar->setBrush(color);
}
}
}
void CustomPlot::setDataBars(const QStringList &rowNames,
const QStringList &columnNames,
const QList<QVector<double> > &values,
const QColor &borderColor,
int valuePosition,
int valuePrecision,
const QColor &valueColor,
bool checkData)
{
//過濾個數不一致數據,防止索引越界
int rowCount = rowNames.count();
int columnCount = columnNames.count();
int valueCount = values.count();
if (columnCount == 0 || valueCount == 0 || columnCount != valueCount) {
return;
}
//設置網格線不顯示,會更好看
customPlot->xAxis->grid()->setVisible(false);
//customPlot->yAxis->grid()->setVisible(false);
//先清空原有柱狀圖
bars.clear();
//設置橫坐標文字描述
QVector<double> ticks;
QVector<QString> labels;
for (int i = 0; i < rowCount; i++) {
ticks << i + 1;
labels << rowNames.at(i);
}
setLabX(ticks, labels);
customPlot->xAxis->setRange(0, rowCount + 1);
for (int i = 0; i < columnCount; i++) {
//同樣也要先過濾個數是否符合要求
QVector<double> value = values.at(i);
if (rowCount != value.count()) {
continue;
}
//創建柱狀堆積圖
CustomBarv *bar = new CustomBarv(customPlot->xAxis, customPlot->yAxis);
bar->setCheckData(checkData);
//設置寬度比例
bar->setWidth(0.6);
//設置顯示值的位置 0-不繪製 1-頂部上面 2-頂部居中 3-中間居中 4-底部居中
bar->setValuePostion(valuePosition);
bar->setValuePrecision(valuePrecision);
bar->setValueColor(valueColor);
#ifndef old
//設置堆積間隙
if (borderColor != Qt::transparent) {
bar->setStackingGap(1);
}
#endif
//設置名稱
bar->setName(columnNames.at(i));
//設置顏色,取顏色集合
QColor color = QColor(51, 204, 255);
if (i < colors.count()) {
color = colors.at(i);
}
//邊緣高亮,如果傳入了邊框顏色則取邊框顏色
if (columnCount > 1 && borderColor == Qt::transparent) {
bar->setPen(Qt::NoPen);
} else {
bar->setPen(QPen(borderColor == Qt::transparent ? color.light(150) : borderColor));
}
bar->setBrush(color);
//設置堆積層疊順序,後面那個移到前一個上面
bars << bar;
if (i > 0) {
bar->moveAbove(bars.at(i - 1));
}
//設置數據
bar->setData(ticks, value);
}
}
五、控制項介紹
1. 超過146個精美控制項，涵蓋了各種儀錶盤、進度條、進度球、指南針、曲線圖、標尺、溫度計、導航條、導航欄，flatui、高亮按鈕、滑動選擇器、農曆等。遠超qwt集成的控制項數量。
2. 每個類都可以獨立成一個單獨的控制項，零耦合，每個控制項一個頭文件和一個實現文件，不依賴其他文件，方便單個控制項以源碼形式集成到項目中，較少代碼量。qwt的控制項類環環相扣，高度耦合，想要使用其中一個控制項，必須包含所有的代碼。
3. 全部純Qt編寫，QWidget+QPainter繪製，支持Qt4.6到Qt5.12的任何Qt版本，支持mingw、msvc、gcc等編譯器，支持任意操作系統比如windows+linux+mac+嵌入式linux等，不亂碼，可直接集成到Qt Creator中，和自帶的控制項一樣使用，大部分效果只要設置幾個屬性即可，極為方便。
4. 每個控制項都有一個對應的單獨的包含該控制項源碼的DEMO，方便參考使用。同時還提供一個所有控制項使用的集成的DEMO。
5. 每個控制項的源代碼都有詳細中文注釋，都按照統一設計規範編寫，方便學習自定義控制項的編寫。
6. 每個控制項默認配色和demo對應的配色都非常精美。
7. 超過130個可見控制項，6個不可見控制項。
8. 部分控制項提供多種樣式風格選擇，多種指示器樣式選擇。
9. 所有控制項自適應窗體拉伸變化。
10. 集成自定義控制項屬性設計器，支持拖曳設計，所見即所得，支持導入導出xml格式。
11. 自帶activex控制項demo，所有控制項可以直接運行在ie瀏覽器中。
12. 集成fontawesome圖形字體+阿里巴巴iconfont收藏的幾百個圖形字體，享受圖形字體帶來的樂趣。
13. 所有控制項最後生成一個dll動態庫文件，可以直接集成到qtcreator中拖曳設計使用。
14. 目前已經有qml版本，後期會考慮出pyqt版本，如果用戶需求量很大的話。
六、SDK下載
- SDK下載鏈接：https://pan.baidu.com/s/1tD9v1YPfE2fgYoK6lqUr1Q 提取碼：lyhk
- 自定義控制項+屬性設計器欣賞：https://pan.baidu.com/s/1l6L3rKSiLu_uYi7lnL3ibQ 提取碼：tmvl
- 下載鏈接中包含了各個版本的動態庫文件，所有控制項的頭文件，使用demo。
- 自定義控制項插件開放動態庫dll使用（永久免費），無任何後門和限制，請放心使用。
- 目前已提供26個版本的dll，其中包括了qt5.12.3 msvc2017 32+64 mingw 32+64 的。
- 不定期增加控制項和完善控制項，不定期更新SDK，歡迎各位提出建議，謝謝！
- widget版本（QQ：517216493）qml版本（QQ：373955953）三峯駝（QQ：278969898）。
- 濤哥的知乎專欄 Qt進階之路 Qt進階之路
- 歡迎關注微信公眾號【高效程序員】，C++/Python、學習方法、寫作技巧、熱門技術、職場發展等內容，乾貨多多，福利多多！
推薦閱讀：
