扩展动态数据统计

以下是三种主要的方式来实现您的需求，分别使用原生的HTML/JavaScript、Vue.js框架和React框架。

1. 使用原生HTML/JavaScript

添加复杂度类型选择

<div class="complexity-type-select">
    <label>选择复杂度类型：</label>
    <select id="complexity-type-select" onchange="updateChart()">
        <option value="best">最佳情况</option>
        <option value="average">平均情况</option>
        <option value="worst">最坏情况</option>
    </select>
</div>

动态数据更新

function fetchUpdatedData() {
    // 模拟异步获取数据
    setTimeout(() => {
        const newData = {
            best: [/* best case data */],
            average: [/* average case data */],
            worst: [/* worst case data */]
        };
        updateChart(newData);
    }, 2000); // 模拟2秒后获取新数据
}

// 页面加载完毕后自动更新数据
window.onload = function() {
    fetchUpdatedData();
    setInterval(fetchUpdatedData, 60000); // 每分钟更新一次数据
};

添加图表动画效果

// 使用 Chart.js 进行动画配置
const ctx = document.getElementById('myChart').getContext('2d');
const chart = new Chart(ctx, {
    type: 'line',
    data: {
        // 数据配置
    },
    options: {
        animation: {
            duration: 1000, // 动画持续时间
            easing: 'easeInOutQuad' // 缓动效果
        }
        // 其他配置项
    }
});

2. 使用 Vue.js 框架

添加复杂度类型选择

<template>
    <div class="complexity-type-select">
        <label>选择复杂度类型：</label>
        <select v-model="selectedComplexityType" @change="updateChart">
            <option value="best">最佳情况</option>
            <option value="average">平均情况</option>
            <option value="worst">最坏情况</option>
        </select>
    </div>
</template>

<script>
export default {
    data() {
        return {
            selectedComplexityType: 'best',
            // 其他数据
        };
    },
    mounted() {
        this.fetchUpdatedData();
        setInterval(this.fetchUpdatedData, 60000); // 每分钟更新一次数据
    },
    methods: {
        async fetchUpdatedData() {
            try {
                const newData = await fetchData(); // 异步获取新数据的函数
                this.updateChart(newData);
            } catch (error) {
                console.error('获取更新数据失败:', error);
            }
        },
        updateChart(data) {
            // 更新图表逻辑
        }
    }
};
</script>

添加图表动画效果

// 在 Vue 组件中的图表配置
import { Line } from 'vue-chartjs';

export default {
    extends: Line,
    mounted() {
        this.renderChart({
            // 图表数据配置
        }, {
            animation: {
                duration: 1000, // 动画持续时间
                easing: 'easeInOutQuad' // 缓动效果
            }
            // 其他配置项
        });
    }
};

3. 使用 React 框架

添加复杂度类型选择

import React, { useState, useEffect } from 'react';

function ComplexityTypeSelect({ onChange }) {
    return (
        <div className="complexity-type-select">
            <label>选择复杂度类型：</label>
            <select onChange={onChange}>
                <option value="best">最佳情况</option>
                <option value="average">平均情况</option>
                <option value="worst">最坏情况</option>
            </select>
        </div>
    );
}

export default ComplexityTypeSelect;

动态数据更新

import React, { useState, useEffect } from 'react';

function fetchDataAndUpdate(setComplexityMap) {
    // 模拟异步获取数据
    setTimeout(() => {
        const newData = {
            best: [/* best case data */],
            average: [/* average case data */],
            worst: [/* worst case data */]
        };
        setComplexityMap(newData);
    }, 2000); // 模拟2秒后获取新数据
}

function App() {
    const [complexityMap, setComplexityMap] = useState({});

    useEffect(() => {
        fetchDataAndUpdate(setComplexityMap);
        const intervalId = setInterval(() => {
            fetchDataAndUpdate(setComplexityMap);
        }, 60000); // 每分钟更新一次数据

        return () => clearInterval(intervalId); // 清除定时器
    }, []);

    return (
        <div>
            {/* 页面结构及其他组件 */}
        </div>
    );
}

export default App;

添加图表动画效果

import { Line } from 'react-chartjs-2';

function LineChart({ data }) {
    return <Line data={data} options={{
        animation: {
            duration: 1000, // 动画持续时间
            easing: 'easeInOutQuad' // 缓动效果
        }
        // 其他配置项
    }} />;
}

export default LineChart;

根据需求选择合适的实现方式，并进一步优化和扩展动态数据统计页面的功能和样式