有没有可能让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';
}
},
}
},
});
型
1条答案
按热度按时间q35jwt9p1#
填充可能是由
x
比例偏移引起的。如果此属性设置为true,则会向两边添加额外的空间,并缩放轴以适应图表区域。默认情况下,条形图的此属性设置为true。将
scales[x].offset
设置为false
。或者,您也可以禁用默认的布局填充、引用