如何删除条形图中的填充？（图表.JS）答案

【问题标题】：How to remove paddings in Bar chart? (Chart.JS)如何删除条形图中的填充？（图表.JS）
【发布时间】：2015-06-24 11:55:03
【问题描述】：

是否可以删除条形图中的填充？

<canvas id="weeksChartFallout" width="660" height="200"></canvas>

var falloutArray = [12, 24, 20, 15, 18, 20, 22, 10, 10, 12, 14, 10, 16, 16];

var dataWeeksFallouts = {
    labels: ["16.02", "17.02", "18.02", "19.02", "20.02", "21.02", "22.02", "23.02", "24.02", "25.02", "26.02", "27.02", "28.02", "01.03"],
    datasets: [
        {
            label: "Fallouts",
            fillColor: "rgba(63,107,245,0.67)",
            data: falloutArray
        }
    ]
};

var fc = document.getElementById('weeksChartFallout').getContext('2d');

window.weeksChartFallout = new Chart(fc).Bar(dataWeeksFallouts,{
    barShowStroke : false,
    barValueSpacing : 4, //distance between bars
    barValueWidth: 20,
    scaleShowLabels: false,
    scaleFontColor: "transparent",
    tooltipEvents: []
});

我的意思是第一个柱和左线之间的空间，尤其是最后一个柱和图表末尾之间的空间 (screenshot)。

这是我的Fiddle

【问题讨论】：

标签： javascript bar-chart chart.js

【解决方案1】：

x 刻度左右填充在calculateXLabelRotation 中计算。如果您只有这些类型的图表，您可以简单地替换此函数以不返回填充，如下所示

var originalCalculateXLabelRotation = Chart.Scale.prototype.calculateXLabelRotation
Chart.Scale.prototype.calculateXLabelRotation = function () {
    originalCalculateXLabelRotation.apply(this, arguments);
    this.xScalePaddingRight = 0;
    this.xScalePaddingLeft = 0;
}

小提琴 - http://jsfiddle.net/ov9p5qhz/

请注意，左侧和右侧仍有一些间距 - 来自您的 barValueSpacing: 4 选项。

如果页面上有其他图表不想分开，请使用Chart.noConflict()

【讨论】：

哥们，你是天才！！！还有一次你救了我^）我应该如何以正确的方式使用'Chart.noConflict（）'？我应该把它放在除最后一个之外的每个图表中吗（我想杀死填充的图表）？
刚刚意识到您实际上并不需要使用 Chart.noConflict。你实际上可以在originalCalculateXLabelRotation.apply(this, arguments);之后做if (this.ctx.canvas.id == 'weeksChartFallout') { this.xScalePaddingRight = 0; this.xScalePaddingLeft = 0; }
你是 ChartJS 之神 :)
@potatopeelings 谢谢，谢谢！我一直在尝试将堆叠条形图和折线图与不同的 x 轴旋转混合 - 完美的解决方案！