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

文章目录

0.文章介绍
1.源码位置
2.效果图
3.代码
- [3.1 代码结构](#3.1 代码结构)
- [3.2 main.qml](#3.2 main.qml)
- [3.3 MyLineChart.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

cpp 复制代码

import QtQuick 2.15
import QtQuick.Window 2.15
import FluentUI 1.0

Window {
    id: root
    visible: true
    width: 1400
    height: 700

    MyScatterChart{
        id:scatterChart
        anchors.top: parent.top
        anchors.left: parent.left
    }
    MyLineChart{
        id:lineChart
        anchors.left: scatterChart.right
        anchors.leftMargin: 20
        anchors.top: scatterChart.top
    }
    MyPieChart{
        id:myPieChart
        anchors.left: lineChart.right
        anchors.leftMargin: 20
        anchors.top: scatterChart.top
    }
    MyBarChart1{
        id:myBarChart1
        anchors.left: scatterChart.left
        anchors.top: scatterChart.bottom
        anchors.topMargin: 10
    }
    MyBarChart2{
        id:myBarChart2
        anchors.left: lineChart.left
        anchors.top: myBarChart1.top
    }

}

3.3 MyLineChart.qml

cpp 复制代码

// MyLineChart.qml
import QtQuick 2.15
import FluentUI

Rectangle {
    id: myLineChart
    width: 400
    height:300

    property var dataLineChart: [] // 储存数据：y轴
    property var labelsLineChart: []  // 存储时间：x轴
    property int maxDataPoints: 10  // 最多显示的数据点数

    FluFrame {
        anchors.fill: parent
        padding: 10
        // 折线图
        FluChart {
            id: chart
            anchors.fill: parent
            chartType: '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: timer
            interval: 1000  // 每秒触发一次
            repeat: true
            onTriggered: {
                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();
        }
    }
}