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>