chart.js - Chart.JS间距和填充

Question

是否可以在图表和x轴之间获得更多空间？

是否可以在图表的右侧和 Canvas 区域的末端之间留出更多的空间？我想在图表旁边的 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);
},

编辑:正如注释中指出的那样，这也会引起水平移动，并且标签的末端不再与x轴标记对齐。

由于x轴和x标签都在单个函数中绘制，并且没有其他变量可以(安全地)弄乱，这意味着您必须更改实际的比例绘制函数。

寻找一个ctx.translate到draw函数的结尾并将其更改为

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/

修正了Scale绘制功能的 fiddle - https://jsfiddle.net/xgc6a77a/(我在此动画中关闭了动画，使端点仅移动了一次，但是您可以对其进行硬编码，或添加一些额外的代码以使其仅执行一次)