全球危机雷达图代码：从结构搭建到数据可视化全解析

我来帮你完善这段代码。这是一个全球危机雷达图的HTML页面，已经包含了基本结构和样式，但JavaScript部分还未完成。以下是完整的实现方案： ```javascript <body>  <script> // 模拟数据 - 四个年份（2020-2023）的危机数据 const crisisData = { labels: ['经济危机', '公共卫生', '地缘政治', '气候变化', '网络安全', '粮食安全'], datasets: [ { label: '2020', backgroundColor: 'rgba(255, 99, 132, 0.2)', borderColor: 'rgba(255, 99, 132, 1)', pointBackgroundColor: 'rgba(255, 99, 132, 1)', pointBorderColor: '#fff', pointHoverBackgroundColor: '#fff', pointHoverBorderColor: 'rgba(255, 99, 132, 1)', data: [85, 95, 70, 65, 60, 75] }, { label: '2021', backgroundColor: 'rgba(54, 162, 235, 0.2)', borderColor: 'rgba(54, 162, 235, 1)', pointBackgroundColor: 'rgba(54, 162, 235, 1)', pointBorderColor: '#fff', pointHoverBackgroundColor: '#fff', pointHoverBorderColor: 'rgba(54, 162, 235, 1)', data: [80, 85, 75, 70, 65, 70] }, { label: '2022', backgroundColor: 'rgba(255, 206, 86, 0.2)', borderColor: 'rgba(255, 206, 86, 1)', pointBackgroundColor: 'rgba(255, 206, 86, 1)', pointBorderColor: '#fff', pointHoverBackgroundColor: '#fff', pointHoverBorderColor: 'rgba(255, 206, 86, 1)', data: [90, 75, 85, 80, 75, 80] }, { label: '2023', backgroundColor: 'rgba(75, 192, 192, 0.2)', borderColor: 'rgba(75, 192, 192, 1)', pointBackgroundColor: 'rgba(75, 192, 192, 1)', pointBorderColor: '#fff', pointHoverBackgroundColor: '#fff', pointHoverBorderColor: 'rgba(75, 192, 192, 1)', data: [85, 70, 90, 85, 80, 85] } ] }; // 初始化雷达图 const ctx = document.getElementById('radarChart').getContext('2d'); let radarChart = new Chart(ctx, { type: 'radar', data: { labels: crisisData.labels, datasets: [crisisData.datasets[0]] // 默认显示2020年数据 }, options: { responsive: true, maintainAspectRatio: false, scales: { r: { angleLines: { display: true, color: 'rgba(255, 255, 255, 0.3)' }, suggestedMin: 0, suggestedMax: 100, ticks: { stepSize: 20, backdropColor: 'transparent', color: 'white' }, pointLabels: { color: 'white', font: { size: 14 } }, grid: { color: 'rgba(255, 255, 255, 0.2)' } } }, plugins: { legend: { display: false }, tooltip: { callbacks: { label: function(context) { return `${context.dataset.label}: ${context.raw}%`; } } } }, elements: { line: { tension: 0.1, borderWidth: 3 } } } }); // 滑块控制年份切换 const timeSlider = document.getElementById('timeSlider'); timeSlider.addEventListener('input', function() { const yearIndex = parseInt(this.value); radarChart.data.datasets = [crisisData.datasets[yearIndex]]; radarChart.update(); }); // 添加自定义tooltip const tooltip = document.createElement('div'); tooltip.className = 'tooltip'; document.body.appendChild(tooltip); document.getElementById('radarChart').addEventListener('mousemove', function(e) { const points = radarChart.getElementsAtEventForMode( e, 'nearest', { intersect: true }, true ); if (points.length) { const point = points[0]; const dataset = radarChart.data.datasets[point.datasetIndex]; const label = radarChart.data.labels[point.index]; const value = dataset.data[point.index]; tooltip.innerHTML = ` <strong>${label}</strong><br> ${dataset.label}: ${value}% `; tooltip.style.opacity = 1; tooltip.style.left = e.pageX + 10 + 'px'; tooltip.style.top = e.pageY + 10 + 'px'; } else { tooltip.style.opacity = 0; } }); </script> </body> ``` 额外需要注意的逻辑点： 1. 雷达图的数据范围建议统一（0-100%），确保各年份数据可比性 2. 滑块事件监听使用'input'而非'change'，实现实时更新效果 3. 自定义tooltip需要处理鼠标移出事件，避免残留显示 ######[AI写代码神器 | 1334点数解答 | 2025-05-03 10:17:27]

服务商

更多选项

快捷项

自定义