是否可以使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';
}
},
}
},
});