垂直移动x轴标签

最简单的方法是在x标签中添加空格。你可以扩展你的图表类型并覆盖你的初始化函数来实现这一点（如果你的标签很长，那么增加30到更大的值）

initialize: function(data){
    data.labels.forEach(function(item, index) {
        data.labels[index] += Array(Math.max(30 - item.length, 0)).join(" ");
    })
    Chart.types.Bar.prototype.initialize.apply(this, arguments);
},

• 编辑 *：如注解中所指出的，这也会导致水平移位，并且标签末端不再与x轴标记对齐。

由于x轴和x标签都是在一个函数中绘制的，并且没有其他变量可以随意使用（安全地），这意味着您必须更改实际的比例绘制函数。
在draw函数的末尾查找ctx.translate，并将其更改为

ctx.translate(xPos, (isRotated) ? this.endPoint + 22 : this.endPoint + 18);

您还必须稍微调整端点（驱动y限制），以便额外的y偏移不会导致标签溢出图表（在绘制覆盖中查找调整此值的线2）。

在右边留下一个缺口

要执行第2步，您需要覆盖绘图函数（在扩展图表中）并更改xScalePaddingRight。但是，由于这不会影响水平网格线，因此在绘图完成后，您必须覆盖一个填充的矩形。完整的绘图函数如下所示

draw: function(){
    // this line is for 1.
    if (!this.scale.done) {
         this.scale.endPoint -= 20
         // we should do this only once
         this.scale.done = true;
    }
    var xScalePaddingRight = 120
    this.scale.xScalePaddingRight = xScalePaddingRight
    Chart.types.Bar.prototype.draw.apply(this, arguments);
    this.chart.ctx.fillStyle="#FFF";
    this.chart.ctx.fillRect(this.chart.canvas.width - xScalePaddingRight, 0, xScalePaddingRight, this.chart.canvas.height);
}

原装小提琴-https://jsfiddle.net/gvdmxc5t/
摆弄修改后的Scale draw函数-https://jsfiddle.net/xgc6a77a/（我在这个函数中关闭了动画，这样端点只移动一次，但是你可以硬编码它，或者添加一些额外的代码，这样它只移动一次）

**“tickMarkLength”**选项将网格线扩展到图表外部并将刻度向下推。

xAxes: [
        {
            gridLines: {
              tickMarkLength: 15  
            },
        }
]

将其用于 chartjs 2.0

scales: {
    xAxes: [{
        barPercentage: 0.9,
        categoryPercentage: 0.55
}]

参考文献

在chartjs v3中，有一个“offset”标志，您可以将其设置为true。这将创建填充。

scales: {
  x: {
     offset: true,
  }
}

如果为true，则向两个边缘添加额外得空间，并缩放轴以适合图表区.默认情况下，条形图得此项设置为true.
文件