如何自定义phpMyAdmin首页显示的快捷统计图表样式？

phpMyAdmin 5.2+ 图表样式不可通过配置修改，仅能通过覆盖CSS或重写JS实现；推荐优先注入custom.css调整响应式、配色与图例显示，改图表类型需修改ServerStatus.js中renderDatabaseSizeChart()并重新打包JS。

phpMyAdmin 5.2+ 版本中快捷统计图表的样式由 ServerStatus.php 和前端 CSS 控制

默认图表（如“数据库大小”“活跃连接数”）使用 chart.js 渲染，但 phpmyadmin 并未开放图表配置入口。你无法通过设置界面修改颜色、尺寸或类型——所有样式都硬编码在 templates/server/status/ 下的 twig 模板和 js/vendor/chart.min.js 的初始化逻辑里。

真正能改的地方只有两处：覆盖 CSS 样式、重写 JS 初始化代码。别试图改 config.inc.php 或用 $cfg['Servers'][$i]['host'] 这类配置项，它们对图表样式完全无效。

覆盖默认 Chart.js 图表样式的最小改动方案

最安全的方式是注入自定义 CSS，定位到 Chart.js 生成的 canvas 容器和 legend 元素。phpMyAdmin 5.2 起使用了 scoped class 名，比如 .server-status-chart 包裹整个图表区域，legend 用 .chart-legend。

• 把你的 CSS 放进 ./themes/pmahomme/css/custom.css（确保该文件被 ./config.inc.php 中的 $cfg['ThemePath'] 或主题加载机制识别）
• 优先级要足够高，例如用 .server-status-chart canvas { max-width: 100% !important; } 强制响应式
• 改配色需针对 Chart.js 的 dataset 颜色变量，比如 .server-status-chart .chartjs-render-monitor canvas { background: #f8f9fa; }
• 隐藏 legend：添加 .chart-legend { display: none !important; }

替换饼图（PieChart）为柱状图（BarChart）需修改 JS 初始化逻辑

phpMyAdmin 在 js/src/server/status/ServerStatus.js 中调用 new Chart(...) 创建图表，默认 type 是 'doughnut'。想改成 'bar'，必须 patch 对应的 renderDatabaseSizeChart() 函数。

• 找到 renderDatabaseSizeChart() 中类似 type: 'doughnut' 的行，改为 type: 'bar'
• bar 图需要 x 轴标签，得同步修改 labels 数组，比如从 ['Total', 'Data', 'Index'] 扩展为包含每个数据库名的数组
• 注意 data.datasets[0].backgroundColor 是硬编码的十六进制数组，长度必须与 labels 一致，否则报错 Uncaught Error: mismatched number of labels and datasets
• 改完后需重新打包 JS（npm run build），否则浏览器缓存旧文件

升级 phpMyAdmin 后自定义样式立即失效的原因

每次升级都会覆盖 js/ 和 templates/ 目录，而 custom.css 不会自动重建——如果你没把自定义 CSS 放在独立路径并配置 $cfg['CustomHeaderFile'] 或主题继承机制里，升级后图表就回退成默认样式。

立即学习“PHP免费学习笔记（深入）”；

更隐蔽的问题是 Chart.js 版本升级：phpMyAdmin 5.2 用 Chart.js 3.x，5.3 升到 4.x，options.plugins.legend.display 写法变了，老 CSS 里的 .chart-legend 类可能被移除或重命名。检查浏览器控制台是否有 Failed to create chart: can't acquire context from the given item 这类错误，大概率是 canvas 元素被销毁后未重建。