javascript - Chart.js 中的水平轴标签

Question

我正在使用一个 chart-js 条形图，它必须放在一个小 div 中，所以我正在寻找一种方法来使 x 轴上的标签水平而不是对 Angular 线。重点是为实际条形获得尽可能高的高度，因为现在标签占用了将近 40% 的可用空间。

这是我的代码:

let options = {
    responsive: true,
    maintainAspectRatio: false,
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero: true
            }
        }],
        xAxes: [{
            display: false
        }]
    }
};
let ctx = document.getElementById('barChartCtx');
let barChart = new Chart(ctx, {
    type: 'bar',
    data: data,
    options: options
});

我暂时禁用了 xAxis 标签。它有效，但理想情况下我希望它们是水平的。想法？

Answer 1

您可以使用刻度刻度 maxRotation 和 minRotation 属性来控制它。

这是一个例子。

let options = {
    responsive: true,
    maintainAspectRatio: false,
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero: true
            }
        }],
        xAxes: [{
            ticks: {
                minRotation: 0,
                maxRotation: 0
            }
        }]
    }
};

请记住，它们是对 Angular 线的原因是因为 chart.js 计算出它们不适合默认的水平方向。如果您发现它们在水平方向上相互溢出，那么您仍然可以使用上述属性来调整旋转，使它们只是略微倾斜。