看起来你提供的代码还未完整，`callbacks` 里的 `label` 函数没有写完。下面我先假设你想在 `label` 函数里自定义提示框显示的内容，我将补充完整并对代码进行优化，同时给出需要注意的逻辑点。 ```html <!DOCTYPE html> <html> <head> <title>从优秀到卓越：数据对比</title> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script> <style> .container { width: 90%; margin: 20px auto; position: relative; } .btn-group { text-align: center; margin: 20px 0; } button { background: #2c3e50; color: white; border: none; padding: 12px 24px; border-radius: 30px; cursor: pointer; font-size: 16px; transition: all 0.3s; margin: 0 10px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } button:hover { background: #1a252f; transform: translateY(-2px); box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15); } .chart-container { background: white; border-radius: 15px; padding: 20px; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); } h2 { text-align: center; color: #2c3e50; margin-bottom: 30px; font-family: 'Arial', sans-serif; } .quote { font-style: italic; text-align: center; margin-top: 20px; color: #7f8c8d; } </style> </head> <body> <div class="container"> <h2>《从优秀到卓越》核心数据对比</h2> <div class="btn-group"> <button id="saveBtn">保存图表为图片</button> <button id="resetBtn">重置视图</button> </div> <div class="chart-container"> <canvas id="comparisonChart"></canvas> </div> <p class="quote">"优秀是卓越的大敌，这并非因为优秀不好，而是因为优秀容易让人满足" - 吉姆·柯林斯</p> </div> <script> // 研究数据 const dimensions = [ "CEO内部提拔率", "转型持续时间(年)", "初期裁员率(%)", "理念明确时间(年)", "股价收益率(倍数)" ]; const excellentData = [90, 7.8, 25, 4, 3]; const comparisonData = [35, 3.2, 10, 0, 0.8]; // 创建图表 const ctx = document.getElementById('comparisonChart').getContext('2d'); const chart = new Chart(ctx, { type: 'bar', data: { labels: dimensions, datasets: [ { label: '实现跨越的公司 (11家)', data: excellentData, backgroundColor: 'rgba(46, 204, 113, 0.8)', borderColor: 'rgba(39, 174, 96, 1)', borderWidth: 2, borderRadius: 5 }, { label: '对照公司 (17家)', data: comparisonData, backgroundColor: 'rgba(231, 76, 60, 0.8)', borderColor: 'rgba(192, 57, 43, 1)', borderWidth: 2, borderRadius: 5 } ] }, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { position: 'top', labels: { font: { size: 14, family: "'Arial', sans-serif" }, padding: 20 } }, tooltip: { backgroundColor: 'rgba(0, 0, 0, 0.7)', titleFont: { size: 14 }, bodyFont: { size: 13 }, padding: 12, displayColors: false, callbacks: { // 自定义提示框显示内容 label: function (context) { let label = context.dataset.label || ''; if (label) { label += ': '; } label += context.parsed.y; // 根据维度添加不同的单位 if (context.label === "CEO内部提拔率" || context.label === "初期裁员率(%)") { label += '%'; } else if (context.label === "转型持续时间(年)" || context.label === "理念明确时间(年)") { label += ' 年'; } return label; } } } } } }); // 保存图表为图片功能 const saveBtn = document.getElementById('saveBtn'); saveBtn.addEventListener('click', function () { const url = chart.toBase64Image(); const a = document.createElement('a'); a.href = url; a.download = 'comparison_chart.png'; a.click(); }); // 重置视图功能 const resetBtn = document.getElementById('resetBtn'); resetBtn.addEventListener('click', function () { chart.resetZoom(); }); </script> </body> </html> ``` 代码说明： 1. `tooltip` 的 `callbacks` 里的 `label` 函数：自定义了提示框显示的内容，根据不同的维度添加了相应的单位。 2. 保存图表为图片功能：给 `saveBtn` 按钮添加了点击事件监听器，点击后将图表转换为 `base64` 图片并下载。 3. 重置视图功能：给 `resetBtn` 按钮添加了点击事件监听器，点击后重置图表的缩放。 额外需要注意的逻辑点： 1. 在修改 `dimensions` 数组时，要确保 `excellentData` 和 `comparisonData` 数组的长度与之匹配，否则图表可能无法正常显示。 2. 对于 `Chart.js` 的版本兼容性问题，不同版本的 API 可能会有所不同，如果后续更新版本，可能需要调整代码。 3. 在使用 `toBase64Image` 方法保存图表时，要注意浏览器的安全策略，某些情况下可能会因为跨域等问题导致保存失败。 [2025-06-26 15:47:17 | AI写代码神器 | 1719点数解答]