使Chart.js图表拉伸到100%宽度,没有内部填充

vsnjm48y  于 11个月前  发布在  Chart.js
关注(0)|答案(1)|浏览(117)

有没有可能让Chart.js图像包含div一样利用页面的整个宽度?


的数据
canvas元素被放置在一个包含div中,该div拉伸了100%的viewport。是否有一个选项可以删除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';
                    }
                },
            }
        },
    });

q35jwt9p

q35jwt9p1#

填充可能是由x比例偏移引起的。如果此属性设置为true,则会向两边添加额外的空间,并缩放轴以适应图表区域。默认情况下,条形图的此属性设置为true。
scales[x].offset设置为false
或者,您也可以禁用默认的布局填充、引用

相关问题