Chart.JS间距和填充 [英] Chart.JS spacing and padding

问题描述

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


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

推荐答案

垂直移动x轴标签

最简单的方法1.是在您的空间中添加空格x标签。您可以扩展图表类型并覆盖您的初始化函数来执行此操作（如果您的标签很长，无论如何都将30增加到更大的值）

The easiest way to do 1. is by adding spaces to your x labels. You can extend your chart type and override your initialize function to do this (increase 30 to something larger if your labels are long to start with anyway)

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轴标记对齐。

Edit : As pointed out in the comments, this causes a horizontal shift as well and the label ends no longer align with the x axis markers.

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

Since both the x axis and the x labels are drawn in a single function and you have no other variables you can mess around with (safely) this means you'll have to change the actual scale draw function.

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

Look for a ctx.translate towards the end of the draw function and change it to

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

您还必须稍微调整端点（驱动y限制），以便额外的y偏移不会导致标签溢出图表（请在绘制倍率中为2调整该线）。

You'll also have to adjust the endpoint (which drives the y limits) a bit so that the additional y offset doesn't cause the labels to overflow the chart (look for the line adjusting this in the draw override for 2.).

留有空隙在右侧

第2步，您将覆盖绘图函数（在扩展图表中）并更改xScalePaddingRight。但是，由于这不会影响您的水平网格线，因此您必须在绘制完成后覆盖一个填充的矩形。完整的绘制函数如下所示：

To do 2, you override your draw function (in your extended chart) and change xScalePaddingRight. However since this doesn't affect your horizontal grid lines you have to overlay a filled rectangle once your draw is complete. Your complete draw function would look like this

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/ （我在此动画中关闭了动画，以便端点仅移动一次，但是您可以对其进行硬编码，或者添加一些额外的功能代码，使其仅执行一次）

Fiddle with modified Scale draw function - https://jsfiddle.net/xgc6a77a/ (I turned off animation in this one so that the endpoint is shifted only once, but you could just hard code it, or add some extra code so that it's done only once)

这篇关于Chart.JS间距和填充的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！