我正在尝试使ChartJS饼图在移动设备上响应。所有标签和标题的比例都可以,但是在实际图表中 it looks like this。
这就是我的目标it to look like。
我尝试更改纵横比和响应性的真/假值,但这没有任何作用。
有人知道这里可能是什么问题吗?
JS:
Chart.defaults.global.defaultFontFamily = "Archivo";
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'pie',
responsive: true,
maintainAspectRatio: false,
data: {
labels: ["Total Working Time", "Time Wasted On Scheduling"],
datasets: [{
data: [40-appendHours, 40-(40-appendHours)],
backgroundColor: [
'#73D500',
'#FD4D7A',
],
borderColor: [
'#73D500',
'#73D500'
],
borderWidth: 5
}]
},
options: {
events: [],
legend: {
labels: {
fontColor: '#44566c',
fontSize: 15,
fontStyle: "normal",
fontFamily: "'Archivo', sans-serif"
},
},
title: {
display: true,
text: 'Hours wasted by 1 person on scheduling per week',
fontSize: 15,
position: 'bottom',
fontColor: '#44566c',
fontFamily: "'Archivo', sans-serif"
},
}
});
}); ///End
HTML:
<div class="col-md-6 order-lg-2 order-md-2 order-sm-2 order-col-2 resultsBox">
<div class="Task">
<h3 class="resultsFont">Results</h3>
<p class="descriptionFont" id="savings"></p>
<hr />
<canvas id="myChart" class="descriptionFont"></canvas>
</div>
</div>