使 Chart.js 图表拉伸至 100% 宽度，无需内部填充

Question

是否可以使 Chart.js 图表像包含的 div 一样利用页面的整个宽度？

canvas 元素放置在一个包含 div 中，该 div 拉伸 100% 的视口。是否有一个选项可以删除 Chart.js 添加的内部填充？

我尝试用负数偏移标签，但没有成功。

图形放置的画布：

<canvas id="save-simulator" class="graph"></canvas>

我的代码：

        const ChartObj = new Chart(element, {
        type: 'line',
        data: chartData,
        options: {
            responsive: true,
            maintainAspectRatio: false,
            onClick: this.handleClick.bind(this, chartData),
            legend: {
                display: false
            },
            scales: {
                yAxes: [{
                    gridLines: {
                        display: false,
                        drawBorder: false
                    },
                    scaleLabel: {
                        display: false
                    },
                    ticks: {
                        display: false
                    }
                }],
                xAxes: [{
                    gridLines: {
                        color: 'rgba(255, 255, 255, 0)',
                        zeroLineColor: 'rgba(255, 255, 255, 0)', // hide the zero line by making it white
                        zeroLineWidth: 0,
                    },
                    scaleLabel: {
                        display: false
                    },
                    ticks: {
                        // Only display time line with a 5 year span
                        callback: function(dataLabel, index) {
                            return (index+1) % 5 === 0 ? dataLabel : '';
                        },
                    }
                }],
            },
            tooltips: {
                mode: 'index',
                intersect: false,
                position: 'nearest',
                callbacks: {
                    label: function(tooltipItem, data) {
                        if (data.datasets[tooltipItem.datasetIndex].label.length) {
                            return data.datasets[tooltipItem.datasetIndex].label + ': ' + currencyFormatter.format(tooltipItem.yLabel, { code: 'SEK', thousand: ' ', precision: 0 });
                        }
                    },
                    title: function(tooltipItem, data) {
                        return data.labels[tooltipItem[0]['index']] + ' år';
                    }
                },
            }
        },
    });

Answer 1

填充可能是由

x

比例偏移引起的。如果此属性设置为 true，则会向两侧添加额外的空间，并且轴会缩放以适合图表区域。对于条形图，此属性默认设置为 true。

将

scales[x].offset

（如此处所定义）设置为

false

。

您也可以禁用默认布局填充，参考