Chart.JS间距和填充 是否有可能在图表和x轴之间获得更多的空间 是否有可能在图表右侧和画布区域末端之间获得更多的空间？我想在图表旁边的画布上再添加一些元素，但这是不可能的，因为图表占据了整个画布的宽度，所以会重叠

垂直移动x轴标签

最简单的方法是1。是通过将空格添加到x标签。您可以扩展图表类型并重写初始化函数来执行此操作（如果标签开始时很长，则增加30到更大的数值）

编辑：正如注释中指出的，这也会导致水平移动，并且标签末端不再与x轴标记对齐

由于x轴和x标签都是在一个函数中绘制的，并且您没有其他可以（安全地）处理的变量，这意味着您必须更改实际的比例绘制函数

在draw函数末尾查找ctx.translate并将其更改为

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

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

在右侧留一个间隙

要执行第二步，您需要覆盖draw函数（在扩展图表中）并更改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);
}

原版小提琴-

---

摆弄修改后的缩放绘制功能—（我在这一个中关闭了动画，这样端点只移动一次，但您可以硬编码它，或者添加一些额外的代码，这样它只移动一次）

选项“tickMarkLength”将网格线延伸到图表外，并向下推动刻度

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

在chartjs 2.0中使用此选项

---

2。工作正常，谢谢：）1的问题。标签也会水平移动，并且不会与上面的点对齐。您也可以在JSFIDLE中看到这一点。第二，它们也会旋转，虽然有足够的空间让它们不旋转（我们可以禁用旋转吗？），啊，好的，观点很好。这让问题变得有点复杂——我已经更新了答案。顺便说一句，我们可以在原型绘制之前加入this.scale.xLabelRotation来禁用旋转（但我的数据标签重叠）。小提琴-真棒的回答！非常感谢。：）要在不修改库本身的情况下向X轴添加垂直填充，您可以更改底部填充的

scale.height

，并将

tickMarkLength

设置为15px，例如，然后在

afterDraw

回调中使用

clearect

清除5px部分刻度线。

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

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