Chart.JS 间距和填充答案

【问题标题】：Chart.JS spacing and paddingChart.JS 间距和填充
【发布时间】：2015-06-07 18:56:15
【问题描述】：

是否可以在图表和 x 轴之间留出更多空间？
是否可以在图表右侧和画布区域末端之间留出更多空间？我想在图表旁边的画布上添加更多元素，但这是不可能的，因为图表占据了整个画布宽度，因此会重叠。

【问题讨论】：

【解决方案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);
},

编辑：正如 cmets 中所指出的，这也会导致水平偏移，并且标签末端不再与 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);
}

原始小提琴 - https://jsfiddle.net/gvdmxc5t/

使用修改后的 Scale 绘制函数 - https://jsfiddle.net/xgc6a77a/（我关闭了此动画中的动画，以便端点仅移动一次，但您可以对其进行硬编码，或添加一些额外的代码，使其只完成一次）

【讨论】：

2.工作正常，谢谢 :) 1. 的问题是标签也水平移动并且它们没有与上面的点对齐。您也可以在 jsfiddle 中看到这一点。其次，尽管有足够的空间让它们不旋转，但它们也会旋转（我们可以禁用旋转吗？）。
嗯，好的，好点。这使它变得更加复杂-我已经更新了答案。顺便说一句，我们可以通过在原型绘制之前放入 this.scale.xLabelRotation 来禁用旋转（但标签与我的数据重叠）。小提琴 - jsfiddle.net/vq9my5zc
很棒的答案！非常感谢你。 :)
要在不修改库本身的情况下向 X 轴添加垂直填充，您可以将 scale.height 更改为底部填充并将 tickMarkLength 设置为 15px，例如，然后清除 5px 部分的刻度在afterDraw 回调中使用clearRect 行。

【解决方案2】：

'tickMarkLength' 选项将网格线延伸到图表外并将刻度向下推。

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

【讨论】：

【解决方案3】：

将此用于 chartjs 2.0

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

Reference

【讨论】：