我在下面给出了使用Chart.js显示雷达图的给定代码。当我在屏幕上将其显示为PDF时,它显得模糊。我一直在尝试使用Chrome上的webkitBackingStorePixelRatio和devicePixelRatio进行扩展,但我有点卡住了。
- HTML -
<div class="chart">
<canvas id="myChart"></canvas>
</div>
- 使用Javascript -
<script>
var ctx1 = document.getElementById("myChart");
var myRadarChart1 = new Chart(ctx1, {
type: 'radar',
data: {
labels: {{ competenceCleTitle|json_encode|raw }},
datasets: [
{
backgroundColor: "#F79646",
borderColor: "#f59c1a",
pointBackgroundColor: "#f59c1a",
pointBorderColor: "#fff",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: "#f59c1a",
pointRadius: 0,
data: {{ competenceCleNiveau|json_encode|raw }}
}
]
},
options: {
legend: {
display: false
},
responsive: true,
scale: {
reverse: false,
ticks: {
display: false,
maxTicksLimit: 8,
stepSize: 1,
beginAtZero: true,
max: 5
}
}
}
});
</script>