Javascript Chart.js中的水平xAxis标签

我正在使用一个图表js条形图，它必须放在一个小div中，所以我正在寻找一种方法，使标签在x轴上水平，而不是对角。关键是要为实际的条形图增加尽可能多的高度，因为现在标签占用了近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标签。这是可行的，但我希望它们是水平的。想法？

您可以使用刻度刻度

maxRotation

和

minRotation

属性来控制此操作

这里有一个例子

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

---

请记住，它们呈对角线的原因是chart.js计算出它们不适合默认的水平方向。如果您发现它们在水平时彼此溢出，则仍然可以使用上述属性来调整旋转，使其仅略微呈对角线。

您可以使用缩放刻度

maxRotation

和

minRotation

属性来控制此操作

这里有一个例子

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

---

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

在

minRotation:0

之后缺少逗号

minRotation:0