Qt ベースのビジュアル大画面モニタリング

まずは写真を
ここに画像の説明を挿入します

QWidget ではクールなインターフェースを実現できないのではないかといつも疑問に思う人がいますが、実際、QWidget はすでに非常に強力です。多くのエフェクトには既製のフレームワークがないため、HTML5 や Android ほど優れたものではありませんが、多くの優れたインターフェースを実現することもできます。この効果はデバイス上でも実現できますが、他の多くのフレームワークでは実現できません。

この大画面監視には主に以下の技術が使用されています。

Qウィジェット
Qチャート
Qカスタムプロット

コードが必要な場合は、gitee にアクセスしてください: https://gitee.com/hudejie/visualize-data

Qチャートのチュートリアル

QChart は、折れ線グラフ、棒グラフ、円グラフなど、さまざまな種類のグラフを簡単に作成できる Qt のビジュアルチャートライブラリです。以下は、QChart の基本的な使用方法のチュートリアルです。

設置と導入

まず、Qt ライブラリと QChart ライブラリをインストールする必要があります。Qt は公式 Web サイトからダウンロードしてインストールでき、QChart ライブラリは Qt Creator に Qt Charts モジュールを追加することでインストールできます。

Qt Creator で新しいプロジェクトを作成し、次のコードをプロジェクトファイル (.pro) に追加して QChart ライブラリを導入します。

QT += charts

チャートの作成

グラフを作成するには、次の手順が必要です。

QChart オブジェクトを作成します。
チャート内のデータ系列を表す QSeries オブジェクトをいくつか作成します。
QSeries オブジェクトを QChart に追加します。
QChartView オブジェクトを作成し、QChart オブジェクトをその親として設定し、レイアウトに追加します。

簡単な例を次に示します。

// 创建一个 QChart 对象
QChart *chart = new QChart();
// 设置图表的标题
chart->setTitle("Simple chart example");
// 创建一个 QPieSeries 对象
QPieSeries *series = new QPieSeries();
// 添加一些数据到系列中
series->append("First", 1);
series->append("Second", 2);
series->append("Third", 3);
// 将系列添加到图表中
chart->addSeries(series);
// 创建一个 QChartView 对象，将图表设置为父对象，并将其添加到布局中
QChartView *chartView = new QChartView(chart);
chartView->setRenderHint(QPainter::Antialiasing);
// 将图表视图添加到布局中
this->layout()->addWidget(chartView);

チャートを美しくする

次の方法でチャートを美しくできます。

アニメーション効果を有効にするには、QChart::setAnimationOptions() メソッドを使用します。
QPieSeries::setExploded() メソッドと QPieSeries::setLabelVisible() メソッドを使用して、円グラフの展開とラベルの可視性を設定します。
QChart::legend() メソッドを使用して凡例のスタイルを設定します。
QChartView::setRenderHint() メソッドを使用して、レンダリング品質を設定します。
QChartView::setAxisX() メソッドと QChartView::setAxisY() メソッドを使用して、軸のスタイルを設定します。

以下に例を示します。

// 启用动画效果和标签可见性
chart->setAnimationOptions(QChart::AllAnimations);
// 设置饼图的爆炸和标签可见性
series->setExploded(true);
series->setLabelVisible(true);
// 设置图例的样式
chart->legend()->setVisible(true);
chart->legend()->setAlignment(Qt::AlignBottom);
// 设置轴的样式和标签格式
QValueAxis *axisX = new QValueAxis;
axisX->setRange(0, 10);
axisX->setLabelFormat("%i");
chartView->setAxisX(axisX, series);
QValueAxis *axisY = new QValueAxis;
axisY->setRange(0, 10);
axisY->setLabelFormat("%i");
chartView->setAxisY(axisY, series);
// 设置渲染质量，并启用轴线和高亮显示（可选）等效果。
chartView->setRenderHint(QPainter::Antialiasing);  // Set antialiasing for the chart. Optional.
chartView->setInteractions(QCP::iRangeDrag | QCP::iRangeZoom);  // Enable range dragging and zooming. Optional.

QCustomPlot チュートリアル

QCustomPlot は、Qt の強力な描画ライブラリであり、折れ線グラフ、棒グラフ、円グラフなど、さまざまなタイプのグラフを簡単に描画できます。以下は、QCustomPlot の基本的な使用方法のチュートリアルです。

設置と導入

まず、Qt と QCustomPlot ライブラリをインストールする必要があります。Qt の公式 Web サイトからダウンロードしてインストールできます。QCustomPlot ライブラリは、公式 Web サイトから、または Qt Creator に Qt Charts モジュールを追加することによってインストールできます。

Qt Creator で新しいプロジェクトを作成し、次のコードをプロジェクトファイル (.pro) に追加して、QCustomPlot ライブラリを導入します。

QT += charts

チャートの作成

グラフの作成には主に次の手順が必要です。

QCustomPlot オブジェクトを作成します。
データを表す 1 つ以上の QCPGraph オブジェクトを作成します。
QCPGraph::addData または QCPGraph::setData を通じてデータを設定します。
グラフのタイトルやX軸、Y軸のラベルなどを設定できます。

簡単な例を次に示します。

// 创建一个 QCustomPlot 对象
QCustomPlot *customPlot = new QCustomPlot();
// 设置图表的标题
customPlot->setTitle("Simple chart example");
// 设置X轴和Y轴的标签
customPlot->xAxis->setLabel("X axis");
customPlot->yAxis->setLabel("Y axis");
// 创建一个 QCPGraph 对象
QCPGraph *graph = customPlot->addGraph();
// 设置数据
graph->addData(1, 2);
graph->addData(2, 3);
graph->addData(3, 4);
// 根据数据自动调整坐标轴的范围以显示所有的数据点
customPlot->rescaleAxes();
// 将图表绘制到屏幕上
customPlot->replot();

チャートを美しくする

次の方法でチャートを美しくできます。

QCustomPlot::setInteractions メソッドを使用して、ユーザーがチャートを操作する方法を設定します。たとえば、ユーザーがマウスを使用してグラフをズームおよびパンしたり、グラフ上のデータポイントをクリックして詳細情報を取得したりできるようにすることができます。
QCPAxis::setLabel および QCPAxis::setTickLabel を通じて軸ラベルスタイルを設定します。たとえば、ラベルのフォント、色、その他のプロパティを設定できます。
QCPGraph::setPen メソッドと QCPGraph::setDataColor メソッドを使用して、データポイントと接続のスタイルを設定します。たとえば、色、線のスタイル、幅などのプロパティを設定できます。
QCustomPlot::setBackground メソッドと QCustomPlot::setCanvasColor メソッドを使用して、チャートの背景色を設定します。
QCustomPlot::legend->setVisible および QCustomPlot::legend->setAlignment を通じて、凡例の可視性と位置を設定します。

以下に例を示します。

// 设置交互方式
customPlot->setInteractions(QCP::iRangeDrag | QCP::iRangeZoom | QCP::iSelectPlottables);  // Enable range dragging, range zooming and selection of plottables (data points, lines, etc.) by点击. Optional.选择`QCP::iSelectPlottables`来点击获取数据点信息`Optional`.打在屏幕上的图像和信息是低分辨率的，通常只作为文章的一部分这样排版就结束了，希望这份教程对你有所帮助！如有其他疑问，欢迎继续提问。

QCustomPlot 的美化图表

除了上述提到的一些功能，QCustomPlot 还有许多其他可以用来美化图表的选项。下面是一些额外的功能：

1. 添加网格线：
使用 QCustomPlot::gridLinesVisible() 方法设置是否显示网格线。通过 QCustomPlot::setGridLinePen 和 QCustomPlot::setGridLineInterpolate方法分别设置网格线的颜色、线型和是否插值。
2. 设置轴线的交叉点：
使用 QCPAxis::setTickLabelPosition 和 QCPAxis::setLabelPosition 方法设置轴线的标签和刻度线的位置。可以使用 QCPAxis::setTickLabelType 和 QCPAxis::setLabelType 来设置标签的类型。
3. 设置数据的标签：
通过 QCPGraph::setLabel 和 QCPGraph::setData 添加数据的同时，可以为每一个数据点设定一个标签。
4. 设置图像的填充色：
使用 QCustomPlot::setBrush 和 QCustomPlot::setGraphs 的方法，可以设置图表中图形的填充色。
5. 设置提示框：
通过 QCustomPlot::setCursorMode 和 QCustomPlot::setCrosshairAxes 方法，可以在图表上设置一个提示框，显示当前鼠标位置的数据信息。
6. 定制坐标轴的标签和刻度线：
使用 QCPAxis::setLabelFont、setLabelColor、setTickLabelFont 和 setTickLabelColor 方法，可以定制坐标轴标签和刻度线的字体和颜色。
7. 添加标记：
通过 QCPGraph::addScatterStyle 和 QCPGraph::setScatterStyle 方法，可以在图表的数据点上添加标记。
8. 导出图表为图片：
使用 QCustomPlot::savePng 和 QCustomPlot::savePdf 方法，可以将图表保存为 PNG 或 PDF 格式的图片或文件。

这些是一些常用的美化图表的技巧，但并不是全部。QCustomPlot 是一个功能强大的绘图库，你可以根据需要尝试更多的功能，来美化你的图表并使其更具表现力。