使用Chart.js版本3,在堆叠条形图上左对齐y轴标签的方法如下:
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.0"></script>
<canvas id="myChart"></canvas>
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['标签1', '标签2', '标签3'],
datasets: [
{
label: '数据集1',
data: [10, 20, 30],
backgroundColor: 'rgba(255, 99, 132, 0.5)',
stack: 'Stack 1',
},
{
label: '数据集2',
data: [5, 10, 15],
backgroundColor: 'rgba(54, 162, 235, 0.5)',
stack: 'Stack 1',
},
{
label: '数据集3',
data: [15, 25, 35],
backgroundColor: 'rgba(75, 192, 192, 0.5)',
stack: 'Stack 1',
},
],
},
options: {
scales: {
y: {
beginAtZero: true,
position: 'left',
axis: 'y',
},
},
},
});
上述代码中,通过设置options中的scales.y.position属性为'left',可以将y轴标签左对齐。
请注意,以上提供的链接仅供参考,具体产品选择还需要根据实际需求进行评估和决策。
领取专属 10元无门槛券
手把手带您无忧上云