<!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; c
看起来你提供的代码还未完整，`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点数解答]
- <!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; c（1719点数解答 | 2025-06-26 15:47:17）102
- <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <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> body { font-family: 'Arial', sans-serif; background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d); margin: 0; （1334点数解答 | 2025-05-03 10:17:27）187
- <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>地质灾害监测数据折线图</title> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-annotation@1.0.2"></script> </head> <body> <div style="width: 800px; margin: auto;"> <canvas id="myChart"></canvas> </div> <script> // 监测数据 const data = { （183点数解答 | 2025-03-12 21:19:50）179
- <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>工程项目里程碑节点</title> <script src="https://cdn.jsdelivr.net/npm/exceljs/dist/exceljs.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/file-saver/dist/FileSaver.min.js"></script> <style> body { font-family: Arial, sans-serif; margin: 20px; line-height: 1.6; } h1 { （310点数解答 | 2025-05-22 07:42:44）126
- <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>金属棒伸长量与温度的关系</title> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <style> body { font-family: Arial, sans-serif; margin: 20px; } .chart-container { width: 80%; max-width: 800px; margin: 0 auto; } </style> </head> <body> <h（159点数解答 | 2025-05-07 00:10:55）121
- <!DOCTYPE html> <html> <head> <title>香烟价格需求弹性折线图</title> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> </head> <body> <!-- 图表容器，设置居中且合适宽度 --> <div style="width: 70%; margin: 20px auto;"> <canvas id="cigaretteElasticityChart"></canvas> </div> <script> // 获取画布上下文 const ctx = document.getElementById('cigaretteElasticityChart').getContext('2d'); // 创建折线图实例 new Chart(ctx, { type: 'line', // 明确指定为折线图 （929点数解答 | 2025-09-06 17:56:09）46
- <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>设备业务趋势分析</title> <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script> <style> body { font-family: 'Segoe UI', Arial, sans-serif; background-color: #f5f7fa; margin: 0; padding: 20px; } .chart-container { background: white;（448点数解答 | 2025-03-16 07:56:31）118
- <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>湖南2025届高考物理公式手册</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/docx/7.4.1/docx.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script> <script src="https://cdnjs.cloudflare.（405点数解答 | 2025-05-28 22:10:21）116
- <!doctype html> <html lang="zh"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/mian.css"> <link rel="stylesheet" href="css/index.css"> <script src="js/jquery-3.3.1.min.js"></script> <script src="js/jquery-ui.min.js"></script> <script type="text/javascript"> // (1)创建js函数，使用jquery动画，实现ready事件 $(document). ____(1)____ (function(){ //ready事件 $('li').each(function(index){ //遍历对象 $(this).hover(function(){ //单击触发事件 $('li').animate({ width:100 },500); //删除当前元素的样式 $('li').eq(index).animate({ width:200 },500); }); }); }); </script> <title>首页</title> </head> <body> <header> <div class="logo"> <img src="img/logo.jpg" width="250" height="60"> </div> <form class="searchform"> <input type="text" name="search" id="search"/> <input type="submit" value="搜索" id="button"/> </form> <div class="navigation"> <a href="#">手机</a> | <a（475点数解答 | 2024-12-19 14:58:05）266
- <!doctype html> <html lang="zh"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/mian.css"> <link rel="stylesheet" href="css/index.css"> <script src="js/jquery-3.3.1.min.js"></script> <script src="js/jquery-ui.min.js"></script> <script type="text/javascript"> // (1)创建js函数，使用jquery动画，实现ready事件 $(document). ____(1)____ (function(){ //ready事件 $('li').each(function(index){ //遍历对象 $(this).hover(function(){ //单击触发事件 $('li').animate({ width:100 },500); //删除当前元素的样式 $('li').eq(index).animate({ width:200 },500); }); }); }); </script> <title>首页</title> </head> <body> <header> <div class="logo"> <img src="img/logo.jpg" width="250" height="60"> </div> <form class="searchform"> <input type="text" name="search" id="search"/> <input type="submit" value="搜索" id="button"/> </form> <div class="navigation"> <a href="#">手机</a> | <a（495点数解答 | 2024-12-19 14:58:06）210
- <!doctype html> <html lang="zh"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/mian.css"> <link rel="stylesheet" href="css/index.css"> <script src="js/jquery-3.3.1.min.js"></script> <script src="js/jquery-ui.min.js"></script> <script type="text/javascript"> // (1)创建js函数，使用jquery动画，实现ready事件 $(document). ____(1)____ (function(){ //ready事件 $('li').each(function(index){ //遍历对象 $(this).hover(function(){ //单击触发事件 $('li').animate({ width:100 },500); //删除当前元素的样式 $('li').eq(index).animate({ width:200 },500); }); }); }); </script> <title>首页</title> </head> <body> <header> <div class="logo"> <img src="img/logo.jpg" width="250" height="60"> </div> <form class="searchform"> <input type="text" name="search" id="search"/> <input type="submit" value="搜索" id="button"/> </form> <div class="navigation"> <a href="#">手机</a> | <a（497点数解答 | 2024-12-19 14:58:18）219
- <!doctype html> <html lang="zh"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/mian.css"> <link rel="stylesheet" href="css/index.css"> <script src="js/jquery-3.3.1.min.js"></script> <script src="js/jquery-ui.min.js"></script> <script type="text/javascript"> // (1)创建js函数，使用jquery动画，实现ready事件 $(document). ____(1)____ (function(){ //ready事件 $('li').each(function(index){ //遍历对象 $(this).hover(function(){ //单击触发事件 $('li').animate({ width:100 },500); //删除当前元素的样式 $('li').eq(index).animate({ width:200 },500); }); }); }); </script> <title>首页</title> </head> <body> <header> <div class="logo"> <img src="img/logo.jpg" width="250" height="60"> </div> <form class="searchform"> <input type="text" name="search" id="search"/> <input type="submit" value="搜索" id="button"/> </form> <div class="navigation"> <a href="#">手机</a> | <a（497点数解答 | 2024-12-19 14:58:20）232