单词统计程序--可视化-CSDN博客

本文链接：https://blog.csdn.net/weixin_47004687/article/details/147459265

1‌.输入界面‌：

        支持大文本输入
        自动过滤标点符号
        不区分大小写
‌2.核心统计功能‌：

        总单词数统计
        唯一单词数统计
        单词频率排序
        百分比频率计算
3‌.可视化展示‌：

        表格显示完整词频数据
        交互式柱状图展示前15个高频词
        自动响应式布局
4‌.样式特点‌：

        现代简约设计风格
        友好的阴影和圆角效果
        清晰的视觉层次
        适合各种屏幕尺寸

5.截图展示：

6.代码再现：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>单词统计可视化程序</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 1200px;
            margin: 20px auto;
            padding: 20px;
            background-color: #f0f2f5;
        }

        .container {
            background: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        #textInput {
            width: 100%;
            height: 150px;
            margin: 10px 0;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }

        button {
            background: #1890ff;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            transition: background 0.3s;
        }

        button:hover {
            background: #096dd9;
        }

        .stats {
            margin: 20px 0;
            padding: 15px;
            background: #f8f9fa;
            border-radius: 5px;
        }

        #wordTable {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
        }

        #wordTable th, #wordTable td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }

        #wordTable th {
            background-color: #1890ff;
            color: white;
        }

        .chart-container {
            margin-top: 30px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>📊 单词统计分析工具</h2>
        <textarea id="textInput" placeholder="请输入要分析的英文文本..."></textarea>
        <button onclick="analyzeText()">开始分析</button>
        
        <div class="stats">
            <strong>统计结果：</strong>
            <div>总单词数：<span id="totalWords">0</span></div>
            <div>唯一单词数：<span id="uniqueWords">0</span></div>
        </div>

        <table id="wordTable">
            <thead>
                <tr>
                    <th>单词</th>
                    <th>出现次数</th>
                    <th>频率占比</th>
                </tr>
            </thead>
            <tbody id="tableBody"></tbody>
        </table>

        <div class="chart-container">
            <canvas id="wordChart"></canvas>
        </div>
    </div>

    <script>
        let myChart = null;

        function analyzeText() {
            const text = document.getElementById('textInput').value;
            const words = text.toLowerCase()
                            .replace(/[^a-z0-9\s]/g, '')
                            .split(/\s+/)
                            .filter(word => word.length > 0);

            // 统计词频
            const wordCount = {};
            words.forEach(word => {
                wordCount[word] = (wordCount[word] || 0) + 1;
            });

            // 排序
            const sortedWords = Object.entries(wordCount)
                .sort((a, b) => b[1] - a[1]);

            // 更新统计信息
            document.getElementById('totalWords').textContent = words.length;
            document.getElementById('uniqueWords').textContent = sortedWords.length;

            // 生成表格
            const tableBody = document.getElementById('tableBody');
            tableBody.innerHTML = '';
            sortedWords.forEach(([word, count]) => {
                const row = document.createElement('tr');
                const percentage = ((count / words.length) * 100).toFixed(2);
                row.innerHTML = `
                    <td>${word}</td>
                    <td>${count}</td>
                    <td>${percentage}%</td>
                `;
                tableBody.appendChild(row);
            });

            // 生成图表
            const topWords = sortedWords.slice(0, 15);
            if (myChart) myChart.destroy();
            
            const ctx = document.getElementById('wordChart').getContext('2d');
            myChart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: topWords.map(item => item[0]),
                    datasets: [{
                        label: '单词出现次数',
                        data: topWords.map(item => item[1]),
                        backgroundColor: '#1890ff',
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });
        }
    </script>
</body>
</html>