I am using the Pebble service to generate base64-encoded PDF files.I wanted to create a set of pie charts and doughnut charts, and for that, I tried using chart.js, but I've encountered an issue where the downloaded PDF doesn't display the charts. Also, I'm having trouble identifying the root cause of this issue. Are there any potential solutions or alternative methods to achieve this?
This is the template I tried to download as PDF.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<div class="header-text" style="margin-top:40px">
<p>育児休業取得率</p>
</div>
<div class="row">
<div class="p-0 m-0 d-flex justify-content-center d-flex align-items-center col-12">
<div class="p-0 m-0 doughnut-chart-card"style="height:200px;width:200px">
<canvas id="myDoughnutChart" style="height:200px;width:200px"></canvas>
<p class="doughnut-chart-value"><span class="doughnut-chart-color">60</span>
<span class="doughnut-chart-color percentage-size p-1">%</span></p>
</div>
<div class="custom-blue-text p-0 m-0 font-weight-bold">
<span class="custom-text3">6,000</span><span class="text-small mt-1 font-weight-bold">人/10,000人</span>
</div>
</div>
</div>
<script>
var ctx = document.getElementById('myDoughnutChart').getContext('2d');
var chartData = {
datasets: [{
data: [6000,10000],
backgroundColor: ["#0588D8","#F1F3F7"],
}]
};
var myDoughnutChart = new Chart(ctx, {
type: 'doughnut',
data: chartData,
options: {
cutoutPercentage: 70,
tooltips: {
enabled: false
},
plugins: {
legend: false,
datalabels: {
display: false
},
}
}
});
Object.assign(ctx.canvas.style, customStyles);
</script>
</body>
</html>