/** * 统计分析页面的JavaScript功能 */ // 初始化所有图表 function initCharts() { // 各图表初始化逻辑在页面内已实现 // 添加图表交互功能 enableChartInteractions(); // 初始化数据表格排序功能 initDataTableSorting(); } // 为图表添加交互功能 function enableChartInteractions() { // 为所有图表添加下载功能 addChartDownloadButtons(); // 为折线图添加时间范围选择功能 addTimeRangeSelectors(); } // 添加图表下载按钮 function addChartDownloadButtons() { const chartContainers = document.querySelectorAll('.chart-container'); chartContainers.forEach(container => { const canvas = container.querySelector('canvas'); if (!canvas) return; const header = container.querySelector('.chart-header'); const downloadBtn = document.createElement('button'); downloadBtn.className = 'btn btn-sm'; downloadBtn.innerHTML = '下载图表'; downloadBtn.onclick = function() { const chartInstance = Chart.getChart(canvas); if (!chartInstance) return; // 创建临时链接并触发下载 const a = document.createElement('a'); a.href = chartInstance.toBase64Image(); a.download = (container.querySelector('.chart-title').textContent || 'chart') + '.png'; document.body.appendChild(a); a.click(); document.body.removeChild(a); }; header.appendChild(downloadBtn); }); } // 添加时间范围选择器 function addTimeRangeSelectors() { // 为具有时间轴的图表添加缩放功能 // 这个功能需要Chart.js的Zoom插件,如果需要可以进一步实现 } // 初始化数据表格排序 function initDataTableSorting() { const tables = document.querySelectorAll('.data-table'); tables.forEach(table => { const headers = table.querySelectorAll('th'); headers.forEach((header, index) => { // 排除不需要排序的列 if (header.classList.contains('no-sort')) return; header.style.cursor = 'pointer'; header.dataset.sortDirection = 'none'; // none, asc, desc // 添加排序图标 const sortIcon = document.createElement('span'); sortIcon.className = 'sort-icon'; sortIcon.innerHTML = ' ⇅'; header.appendChild(sortIcon); // 添加点击事件 header.addEventListener('click', () => { // 重置其他列的排序状态 headers.forEach(h => { if (h !== header) h.dataset.sortDirection = 'none'; }); // 切换当前列的排序方向 const currentDirection = header.dataset.sortDirection; if (currentDirection === 'none' || currentDirection === 'desc') { header.dataset.sortDirection = 'asc'; } else { header.dataset.sortDirection = 'desc'; } // 执行排序 sortTable(table, index, header.dataset.sortDirection); }); }); }); } // 执行表格排序 function sortTable(table, columnIndex, direction) { const tbody = table.querySelector('tbody'); const rows = Array.from(tbody.querySelectorAll('tr')); // 排序行 rows.sort((a, b) => { const aValue = a.querySelectorAll('td')[columnIndex].textContent.trim(); const bValue = b.querySelectorAll('td')[columnIndex].textContent.trim(); // 检测是否为数值(包括货币符号) const aNum = parseFloat(aValue.replace(/[¥,]/g, '')); const bNum = parseFloat(bValue.replace(/[¥,]/g, '')); if (!isNaN(aNum) && !isNaN(bNum)) { return direction === 'asc' ? aNum - bNum : bNum - aNum; } // 字符串比较 return direction === 'asc' ? aValue.localeCompare(bValue, 'zh-CN') : bValue.localeCompare(aValue, 'zh-CN'); }); // 重新添加排序后的行 rows.forEach(row => tbody.appendChild(row)); } // 页面加载完成后初始化 document.addEventListener('DOMContentLoaded', initCharts);