Chart.js 带个人的分组条形图 label

Question

我正在尝试为每个条形图实现一个带有 label 的分组条形图。 我不想将第二个 label 作为图例，基本上我想要 2 个标签：一个用于组，一个用于数据集中的元素。 就像是：

我需要在哪里放置第二个标签（男/女），我将这个 label 放在数据集中，但它不起作用。

我需要在哪里放置第二个标签（男/女），我将这个 label 放在数据集中，但它不起作用。

Answer 1

您应该声明并配置另一个 x 轴。 在以下受您的数据启发的示例中，我使用options.scales.x.ticks.callback （请参阅标记轴 | Chart.js ），它允许我注入新标签。

 const ctx = document.getElementById('myChart'); new Chart(ctx, { type: 'bar', data: { labels: ['Category 1', 'Category 2', 'Category 3', 'Category 4'], datasets: [{ label: 'Dataset 1', data: [3, 4, 4, 2], stack: 'Stack 0' }, { label: 'Dataset 2', data: [5, 3, 4, 7], stack: 'Stack 0' }, { label: 'Dataset 3', data: [3, 0, 4, 4], stack: 'Stack 1' }, { label: 'Dataset 4', data: [2, 5, 6, 2], stack: 'Stack 1' }] }, options: { scales: { x: { stacked: true, ticks: { font: { weight: 'bold' }, callback: () => 'Label 1 | Label 2' } }, x2: { border: { display: false }, grid: { display: false } }, y: { stacked: true, beginAtZero: true } }, plugins: { legend: { display: false } } } });

 .chart-container { position: relative; width: 600px; }

 <script src="https://cdn.jsdelivr.net/npm/chart.js@4.2.0"></script> <div class="chart-container"> <canvas id="myChart"></canvas> </div>