Chart.JS间距和填充

Question

1. 是否有可能在图表和x轴之间获得更多空间？
2. 是否有可能在图表的右侧和画布区域的末端之间获得更多空间？我想在图表旁边的画布上添加更多元素,但这是不可能的,因为图表占据整个画布宽度,因此它会重叠.

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并将其更改为

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/

小提琴改进的缩放绘制功能 - https://jsfiddle.net/xgc6a77a/(我关闭了这个动画,以便端点只移动一次,但你可以硬编码,或者添加一些额外的代码,这样它就是只完成一次)

Answer 2

'tickMarkLength'选项将网格线扩展到图表之外并向下推动刻度线。

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