当前位置：首页 > news >正文

图表：调用FluentUI中的折线图散点图和饼状图

news 来源：原创 2024/9/20 20:38:32

文章目录

0.文章介绍
1.源码位置
2.效果图
3.代码
- 3.1 代码结构
- 3.2 main.qml
- 3.3 MyLineChart.qml

0.文章介绍

调用项目FluentUI中的散点图、折线图和饼状图组件，做定制化改进。
项目FluentUI源码位置：https://github.com/zhuzichu520/FluentUI
项目FluentUI导入教程：https://blog.csdn.net/summer__7777/article/details/139819435

1.源码位置

在这里插入图片描述

2.效果图

在这里插入图片描述

3.代码

3.1 代码结构

在这里插入图片描述

3.2 main.qml

import QtQuick 2.15
import QtQuick.Window 2.15
import FluentUI 1.0Window {id: rootvisible: truewidth: 1400height: 700MyScatterChart{id:scatterChartanchors.top: parent.topanchors.left: parent.left}MyLineChart{id:lineChartanchors.left: scatterChart.rightanchors.leftMargin: 20anchors.top: scatterChart.top}MyPieChart{id:myPieChartanchors.left: lineChart.rightanchors.leftMargin: 20anchors.top: scatterChart.top}MyBarChart1{id:myBarChart1anchors.left: scatterChart.leftanchors.top: scatterChart.bottomanchors.topMargin: 10}MyBarChart2{id:myBarChart2anchors.left: lineChart.leftanchors.top: myBarChart1.top}}

3.3 MyLineChart.qml

// MyLineChart.qml
import QtQuick 2.15
import FluentUIRectangle {id: myLineChartwidth: 400height:300property var dataLineChart: [] // 储存数据：y轴property var labelsLineChart: []  // 存储时间：x轴property int maxDataPoints: 10  // 最多显示的数据点数FluFrame {anchors.fill: parentpadding: 10// 折线图FluChart {id: chartanchors.fill: parentchartType: 'line'chartData: { return {labels: myLineChart.labelsLineChart, // x轴标签datasets: [{ // 包含一个或多个数据集的配置label: 'My First Dataset', // 数据集的名称或描述，显示在图表的图例中data: myLineChart.dataLineChart,fill: true, // 决定图表中的线条下方是否填充颜色borderColor: 'rgb(75, 192, 192)', // 线条的颜色// backgroundColor:'red' // 填充区域颜色tension: 0.1  // 线条的平滑度}]}}// 配置图表外观和行为的属性chartOptions: { return {maintainAspectRatio: false,title: {display: true,text: '线形图名称'},tooltips: {mode: 'index',intersect: false},scales: {xAxes: [{scaleLabel: {display: true,labelString: 'Time (HH:MM:SS)'  // X轴的单位}}],yAxes: [{scaleLabel: {display: true,labelString: 'Value (Units)'  // Y轴的单位}}]}}}}Timer {id: timerinterval: 1000  // 每秒触发一次repeat: trueonTriggered: {var currentTime = new Date();var timeString = currentTime.toLocaleTimeString();  // 获取当前时间的字符串格式，精确到秒// 更新数据和标签myLineChart.dataLineChart.push(Math.random() * 1000);myLineChart.labelsLineChart.push(timeString);if (myLineChart.dataLineChart.length > myLineChart.maxDataPoints) {myLineChart.dataLineChart.shift();myLineChart.labelsLineChart.shift();  // 移除最旧的标签}chart.animateToNewData();}}Component.onCompleted: {timer.restart();}}
}