将responsive
设置为false
时,图表将在首次加载时进行动画处理。
我在position:absolute
和div
的{{1}}内有两个画布,position:relative
并排
这是JS
new Chart(share,{
type: 'doughnut',
data: Data2,
options: {
maintainAspectRatio: false,
responsive: true,
legend: {
position: 'bottom',
},
title: {
display: true,
text: 'repartition des sorties du stock aux regions'
},
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var dataset = data.datasets[tooltipItem.datasetIndex];
var total = dataset.data.reduce(function(previousValue, currentValue, currentIndex, array) {
return previousValue + currentValue;
});
var currentValue = dataset.data[tooltipItem.index];
var precentage = Math.floor(((currentValue/total) * 100)+0.5);
return precentage + "%";
}
}
}
}
})
// draw line chart
new Chart(io,{
type: 'line',
data: Data,
options: {
responsive : true,
maintainAspectRatio : false,
legend: {
display: true,
position: 'bottom',
labels: {
fontColor: "#000080",
}
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
})
io.canvas.parentNode.style.height = '600px';
io.canvas.parentNode.style.width = '500px';
io.canvas.parentNode.style.position = 'relative';
io.canvas.style.position = 'absolute';
share.canvas.style.position = 'absolute';
share.canvas.style.left='600px';
这是HTML
<div id="canvasC">
<canvas id="IO" width="600" height="400" ></canvas>
<canvas id="share" width="600" height="400" ></canvas>
</div>