QT:QML制作線形圖

一.介紹

二.引入庫

三.自定義屬性

四.懸停處理函數

五.設置X軸

六.設置Y軸

七.畫線

八.測試點坐標

九.設置值

十.效果演示

十一.代碼演示

1.LineGraph.qml

2.main.qml

一.介紹

線形圖（也稱為折線圖）是一種常用的數據可視化工具，主要用于展示數據隨時間或其他連續變量的變化趨勢。它的作用主要包括：

1.趨勢展示：線形圖能清晰地展示數據隨時間的變化，幫助觀察者理解數據隨時間的發展趨勢，如股票價格、氣溫變化、銷售量等。

2.比較分析：可以同時繪制多條線，便于比較不同類別或組別的數據變化，便于找出差異和相似之處。

3.趨勢預測：基于歷史數據，線形圖可以用于預測未來的趨勢，為決策提供依據。

4.數據解讀：通過觀察線的斜率和起伏，可以直觀地理解數據的增減速度以及波動的幅度。

5.易于理解：相比于散點圖或柱狀圖，線形圖更易于解讀，特別是對于連續的變化數據。

6.數據可視化：它是數據可視化中最基礎的圖表類型之一，對于初學者來說，學習和理解線形圖是入門其他復雜圖表的基礎。

二.引入庫

import QtCharts 2.1

QtCharts 是 Qt 提供的一個模塊，用于在應用程序中創建各種類型的圖表，如折線圖、柱狀圖、餅圖、散點圖等。通過引入這個模塊，開發者可以利用 QtCharts 提供的類和函數來設計和實現圖表功能，從而使得應用程序能夠以圖形化的方式展示數據。

具體來說，引入 QtCharts 2.1 后，你可以使用以下功能：

1.創建圖表：使用?QChart?類創建一個圖表對象，它是所有圖表類型的基類。

2.添加數據系列：使用不同的數據系列類（如?QLineSeries、QBarSeries、QPieSeries?等）向圖表中添加數據。

3.設置軸：使用?QValueAxis、QCategoryAxis?等類來設置圖表的坐標軸。

4.定制圖表外觀：可以設置圖表的標題、圖例、背景、顏色、字體等屬性。

5.交互功能：為圖表添加交互功能，如縮放、平移、工具提示等。

6.顯示圖表：使用?QChartView?類將圖表顯示在應用程序的用戶界面中。

三.自定義屬性

自定義屬性，用于存儲圖表的配置信息，如 Y 軸的最小值和最大值、圖例的文本、線條的顏色和寬度等。

四.懸停處理函數

1.將傳入的顏色參數?_color?賦值給局部變量?m_color。這個顏色可能用于后續的繪圖或者文本顯示。

2.檢查?type?參數的值。如果?type?為?true，則執行以下操作：

（1）將?data?參數轉換為字符串，并保留兩位小數，然后將這個字符串賦值給?dataNameValue?組件的?text?屬性。
（2）將?dataNameValue?組件的?visible?屬性設置為?true，使其在界面上可見。

3.如果?type?為?false?或者不是?true，則將?dataNameValue?組件的?visible?屬性設置為?false，使其在界面上不可見。

五.設置X軸

min: minXaxis: 設置軸上顯示的最小值。
max: maxXaxis: 設置軸上顯示的最大值。
tickCount: 3: 在最小值和最大值之間設置了3個主要刻度線。
minorTickCount: 0: 沒有設置次要刻度線。
color: titleColor: 設置軸線的顏色為titleColor的值。
labelsColor: titleColor: 設置軸上刻度線的值的顏色為titleColor的值。
minorGridLineColor: titleColor: 設置次要網格線的顏色為titleColor的值。由于minorTickCount設置為0，因此不會顯示次要網格線。
titleVisible: true: 使軸標題可見。
titleBrush: titleColor: 設置用于軸標題的筆刷（顏色和樣式）為titleColor的值。

六.設置Y軸

min: m_min_Y_L: 設置軸上顯示的最小值。
max: m_max_Y_L: 設置軸上顯示的最大值。
labelsColor: lineSeries1.color: 設置軸上刻度線的值的顏色為lineSeries1組件的顏色。
color: titleColor: 設置軸線的顏色為titleColor的值。
titleText: m_sLegent1: 設置軸標題的文本為m_sLegent1的值。
titleVisible: true: 使軸標題可見。
titleBrush: lineSeries1.color: 設置用于軸標題的筆刷（顏色和樣式）為lineSeries1組件的顏色。
visible: m_bAxis1: 設置軸的可見性為m_bAxis1的值。

七.畫線

1.axisX: axisX: 設置該線系列沿axisX軸進行繪制，axisX可能是另一個已定義的ValueAxis。

2.axisY: axisY_L: 設置該線系列沿axisY_L軸進行繪制，即沿之前定義的垂直軸。

3.width: m_seriesWidth1: 設置線的寬度為m_seriesWidth1的值，這通常是用來控制線的粗細，m_seriesWidth1需要在其他地方定義具體數值。

4.color: "green": 設置線的顏色為綠色。

5.onHovered: hoverShowText(state,point.y,lineSeries2.color): 當鼠標懸停在該線上的數據點時，調用名為hoverShowText的處理函數，傳遞當前的鼠標狀態（state），數據點的y值（point.y），以及線的顏色（lineSeries2.color）作為參數。這個函數可能在圖表組件的樣式表或JavaScript代碼中定義，用于顯示數據點的詳細信息或者改變線的樣式。