Question

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

enter image description here

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/

使用修改后的Scale绘制函数 - 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间距和填充

3 个答案: