Question

是否可以更改标签位置，如CSS中的填充或边距？

我想将标签放在x轴上方。

Answer 1

您可以按照以下步骤更改xAxes标签位置：

将.getContext("2d")添加到获取ctx画布对象的调用中：

var ctx = document.getElementById("gescanntePackzettelChart").getContext("2d");

隐藏当前的xAxes ticks：

xAxes: [{
    ticks: {
        display: false
    }
}

将animation添加到options配置中，并使用canvas fillText()方法创建新标签：

animation: {
    duration: 1,
    onComplete: function() {
        var controller = this.chart.controller;
        var chart = controller.chart;
        var xAxis = controller.scales['x-axis-0'];

        var numTicks = xAxis.ticks.length;        
        var xOffsetStart = xAxis.width / numTicks;
        var halfBarWidth = (xAxis.width / (numTicks * 2));

        xAxis.ticks.forEach(function(value, index) {
            var xOffset = (xOffsetStart * index) + halfBarWidth;
            var yOffset = chart.height - 20;
            ctx.fillText(value, xOffset, yOffset);
        });

    }
}

对于xOffset，要确定正确的位置，请取xAxis宽度并将其除以刻度标签的数量。这将告诉您每个条的宽度。然后，将该数字乘以当前index，将标签放在正确的条形图前面。最后，添加添加半个条的宽度，使条形图中的标签居中。

对于yOffset，从图表的高度开始，然后减去你想要移动标签的数量。

使用JSFiddle：https://jsfiddle.net/m5tnkr4n/124

Answer 2

基于@ Tot-Zam的响应，可以使用ChartJs缩放对象的方法来更轻松地定义上下文像素坐标。您也不需要定义ctx对象-使用this.chart对象已经可以访问它。

    animation: {
          duration: 0,
          onComplete: function() {
            let chart = this.chart;
            let controller = chart.controller; 
            let axis = controller.scales['x-axis-0'];
            let yOffset = chart.height - 5;
            axis.ticks.forEach(function(value, index) {
              let xOffset = axis.getPixelForValue(value);     
              chart.ctx.fillText(value, xOffset, yOffset);
            })
          }
        }

工作代表：https://repl.it/@lunarplasma/ChartJs-custom-axis-labels

如何更改Chart.js中的x轴标签位置

2 个答案: