Chart.JS 间距和填充

Question

是否可以在图表和 x 轴之间增加一些 space？
是否有可能在图表的右侧和 canvas 区域的末尾之间得到更多的 space？我想向图表旁边的 canvas 添加更多元素，但这是不可能的，因为图表占据了整个 canvas 宽度，因此它会重叠。

Answer 1

垂直移动 x 轴标签

执行 1. 的最简单方法是在 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);
},

Edit ：正如评论中所指出的，这也会导致水平偏移，并且标签末端不再与 x 轴标记对齐。

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

在绘图函数的末尾寻找 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);
}

原始 fiddle - https://jsfiddle.net/gvdmxc5t/

Fiddle 修改后的比例绘制函数 - https://jsfiddle.net/xgc6a77a/（我在这个中关闭了动画，这样端点只移动一次，但你可以硬编码，或者添加一些额外的代码，以便它只完成一次）

Answer 2

'tickMarkLength' 选项将网格线延伸到图表外并向下推动价格变动。

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

Answer 3

将此用于 chartjs 2.0

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

Reference

Chart.JS 间距和填充

Chart.JS spacing and padding

chart.js