问题描述
我想将饼图放在我的 html 页面上,并通过在 Flask 应用程序中使用 wkhtml2pdf 和 pdfkit 工具将其转换为 pdf。但它不能正确发生。
似乎图表切片不完整,比例计算错误。
这里是 python 方面:
html = render_template('chart3.html')
pdf = pdfkit.from_string(html,False)
这是我的简单 chart3.html 文件:
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="utf-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/emn178/chartjs-plugin-labels/src/chartjs-plugin-labels.js"></script>
</head>
<body>
<canvas id="myChart" width="600" height="400"></canvas>
<script>
// Global parameters:
// do not resize the chart canvas when its container does (keep at 600x400px)
Chart.defaults.global.responsive = false;
// define the chart data
var chartData = {
labels: [
'Chrome','IE','FireFox','Safari','Opera','Navigator',],datasets: [
{
data: [700,500,400,600,300,100],backgroundColor : ['#f56954','#00a65a','#f39c12','#00c0ef','#3c8dbc','#d2d6de'],}
]
}
// get chart canvas
var ctx = document.getElementById("myChart").getContext("2d");
var options = {
tooltips: {
enabled: false
},plugins: {
labels: [
{
render: 'label',position: 'outside',fontColor: '#000',fontSize: 15
},{
render: 'percentage',fontSize: 10,position: 'border',}
]
}
};
// create the chart using the chart canvas
var myChart = new Chart(ctx,{
type: 'pie',data: chartData,options:options
});
</script>
</body>
</html>
解决方法
这看起来像是在动画中途发生的捕获。尝试在您的 options
对象中禁用动画:
var options = {
animation: false,// ...
}