Chart.js双数据集柱状图无法显示图例问题求助
2026-5-12
解决Chart.js双轴柱状图图例不显示的问题
嘿，我帮你排查了几个导致图例无法正常显示的关键问题，咱们一步步来解决：
1. 核心问题：数据长度不匹配
你的labels数组有8个元素，但两个数据集dataFirst和dataSecond的data数组只有7个元素。这种数量不匹配会让Chart.js渲染时出现异常，甚至直接影响图例的加载显示——这是最主要的原因。
2. 次要问题：Legend配置冗余
在Chart.js v2版本中，控制图例显示的核心配置是options.legend.display，你同时设置了enabled: true和display: true，虽然这俩属性效果类似，但冗余配置可能引发意外冲突，建议只保留display: true就够了。
修正后的完整代码
<html> <body> <canvas id="chart_plot" width="400" height="400"></canvas> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"></script> <script> function addData(chartID, labels, data) { // 全局基础配置 Chart.defaults.scale.ticks.beginAtZero = true; Chart.defaults.global.responsive = true; Chart.defaults.global.maintainAspectRatio = true; var ctx = document.getElementById(chartID).getContext('2d'); var newChartData = { type: "bar", data: { labels: labels, // 直接用传入的labels，避免重复处理 datasets: data.datasets }, options: { legend: { display: true, // 仅保留这个控制图例显示 labels: { fontColor: 'black', fontSize: 18 } }, // 如果你需要真正的双轴（左右两个Y轴），可以添加下面的scales配置 scales: { yAxes: [ { position: 'left', ticks: { beginAtZero: true } } ] } } }; console.log(JSON.stringify(newChartData, null, 2)); var chart_plot = new Chart(ctx, newChartData); chart_plot.update(); } // 修正数据长度，让每个数据集的data和labels数量一致 var dataFirst = { label: "% Change in Spends", data: [20, 15, 60, 60, 65, 30, 70, 0], // 补全第8个元素 backgroundColor: Array(8).fill('rgba(219, 0, 17, 0.8)') // 简化重复的背景色设置 }; var dataSecond = { label: "% Change in Applications", data: [0, 59, 75, 20, 20, 55, 40, 0], // 补全第8个元素 backgroundColor: Array(8).fill('rgba(117, 117, 117, 0.8)') // 简化重复的背景色设置 }; var speedData = { datasets: [dataFirst, dataSecond] }; // 调用函数生成图表 addData('chart_plot', ['TV', 'Press', 'Airport OOH', 'Search', 'Facebook', 'Twitter', 'Display', 'Affiliates'], speedData); </script> </body> </html>
额外补充：实现真正的双轴柱状图
如果你需要的是左右两个独立Y轴的柱状图，还需要给每个数据集指定对应的Y轴，修改scales配置如下：
scales: { yAxes: [ { id: 'y-axis-spends', position: 'left', ticks: { beginAtZero: true, fontColor: 'rgba(219, 0, 17, 0.8)' } }, { id: 'y-axis-apps', position: 'right', ticks: { beginAtZero: true, fontColor: 'rgba(117, 117, 117, 0.8)' }, gridLines: { display: false } // 隐藏右侧Y轴的网格线，避免重叠 } ] }
然后给两个数据集分别加上yAxisID：
var dataFirst = { // ...其他配置 yAxisID: 'y-axis-spends' }; var dataSecond = { // ...其他配置 yAxisID: 'y-axis-apps' };
内容的提问来源于stack exchange，提问作者RajdeepB
