如何删除条形图中的填充?(图表JS）

How to remove paddings in Bar chart? (Chart.JS)

本文关键字：填充 图表 JS 条形图 何删除 删除      更新时间：2023-09-26

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

<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: []
});

我指的是第一条和左边线之间的空间，尤其是最后一条和图表末尾之间的空间（屏幕截图）。

这是我的Fiddle

在calculateXLabelRotation中计算x刻度左右填充。如果你只有这些类型的图表，你可以简单地替换这个函数，不返回填充，就像下面的一样

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

Fiddle-http://jsfiddle.net/ov9p5qhz/

请注意，左侧和右侧仍然有一些间距，这来自于barValueSpacing: 4选项。

如果页面上有其他不想单独保存的图表，请使用Chart.noConflict()

相关文章：