0.文章介绍

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

1.源码位置

2.线性图：基础版本

2.1效果图

2.2代码

import QtQuick 2.15
import QtQuick.Window 2.15
import FluentUI


Window {
    id: root
    visible: true
    width: 1000
    height: 600
    property var dataLineChart: []

    Rectangle{

        id:myLineChart
        width: 500
        height: 400


        FluFrame{
            anchors.fill: parent // 填充全部界面
            padding: 10
            FluChart{
                id: chart
                anchors.fill: parent
                chartType: 'line'
                chartData: { return {
                        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
                        datasets: [{
                                label: 'My First Dataset',
                                data: root.dataLineChart,
                                fill: false,
                                borderColor: 'rgb(75, 192, 192)',
                                tension: 0.1
                            }]
                    }
                }
                chartOptions: { return {
                        maintainAspectRatio: false,
                        title: {
                            display: true,
                            text: 'Chart.js Line Chart - Stacked'
                        },
                        tooltips: {
                            mode: 'index',
                            intersect: false
                        }
                    }
                }
            }

            Timer{
                id: timer
                interval: 1000 // 每隔 1000 毫秒就会触发一次 onTriggered 信号
                repeat: true
                onTriggered: {
                    root.dataLineChart.push(Math.random()*1000)
                    if(root.dataLineChart.length>7){
                        root.dataLineChart.shift()
                    }
                    chart.animateToNewData()
                }
            }
            Component.onCompleted: {
                timer.restart()
            }

        }


    }

}

3.线形图：封装版本

3.1 效果图

3.2 代码

// MyLineChart.qml
import QtQuick 2.15
import FluentUI

Rectangle {
    id: myLineChart
    width: 500
    height: 400

    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();
        }
    }
}