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

时间:2017-06-08 13:53:40

标签: javascript chart.js

是否可以更改标签位置,如CSS中的填充或边距? current chart

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

2 个答案:

答案 0 :(得分:2)

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

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

    var ctx = document.getElementById("gescanntePackzettelChart").getContext("2d");
    
  2. 隐藏当前的xAxes ticks

    xAxes: [{
        ticks: {
            display: false
        }
    }
    
  3. 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,从图表的高度开始,然后减去你想要移动标签的数量。

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

答案 1 :(得分:0)

基于@ 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