如何删除条形图中的填充？ （chart.js之）

Question

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

<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

Answer 1

x scale左右填充在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()