我已经写了一个图表HTML代码使用chartjs这是工作良好这里是代码
const months = [1,2,3]
const ndvi_data = [3,4,5]
const evi_data = [6,7,8,9]
new Chart(document.getElementById("ndvi_evi_chart"), {
type: 'bar',
data: {
labels: months,
datasets: [{
label: "NDVI",
type: "bar",
stack: "Base",
backgroundColor: "#6418C3",
data: ndvi_data,
}, {
label: "EVI",
type: "bar",
stack: "Sensitivity",
backgroundColor: "#B270ED",
data: evi_data,
}]
},
options: {
plugins: {
legend: {
display: true,
position: "top",
align: "end"
}
},
scales: {
xAxes: [{
//stacked: true,
stacked: true,
ticks: {
beginAtZero: true,
maxRotation: 0,
minRotation: 0
}
}],
yAxes: [{
stacked: true,
scaleLabel: {
display: true,
labelString: 'NDVI and EVI'
},
}]
},
}
});
.chartNdvi{
width: 500px;
padding: 20px;
background: white;
}
<div class="chartNdvi" style="border:1px solid #A9A9A9">
<p style="font-weight: bold; font-size:15px;">Crop Health</p>
<p style="font-size:10px;">NDVI and EVI (Six Month Historical Data)</p>
<canvas id="ndvi_evi_chart" width="200" height="80"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.3.2/dist/chart.min.js"></script>
现在的问题是,当我试图保存这个HTML文件,其中包含了大量的图表到一个PDF文件的图表是不可见的PDF文件
问题是我如何将那些ChartJS图表显示成PDF文件
我将其转换为PDF的代码
import pdfkit
# converting html file to pdf file
pdfkit.from_file('144474.html', 'output1.pdf')
型
1条答案
按热度按时间mzsu5hc01#
我认为一个好的方法是将画布转换为图像(toDataURL()),然后继续进行。
使用css媒体查询(@media screen / @media print)你可以控制外观。(在片段中注解掉)