Python 在flask应用程序中未正确呈现饼图
我想把饼图放在我的html页面上，并在Flask应用程序中使用wkhtml2pdf和pdfkit工具将其转换为pdf。但这不能正常进行 图表的各个部分似乎不完整，比例计算错误 这里是python方面：Python 在flask应用程序中未正确呈现饼图,python,chart.js,pdfkit,Python,Chart.js,Pdfkit,我想把饼图放在我的html页面上，并在Flask应用程序中使用wkhtml2pdf和pdfkit工具将其转换为pdf。但这不能正常进行 图表的各个部分似乎不完整，比例计算错误 这里是python方面： html = render_template('chart3.html') pdf = pdfkit.from_string(html, False) 以下是我的简单chart3.html文件： <!DOCTYPE html> <html lang="
html = render_template('chart3.html')
pdf = pdfkit.from_string(html, False)
<!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',
fontColor: '#000',
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>
//全局参数：
//当图表画布的容器调整大小时，请勿调整其大小（保持在600x400px）
Chart.defaults.global.responsive=false；
//定义图表数据
var图表数据={
标签：[
“铬”，
"即",，
“FireFox”，
“狩猎”，
“歌剧”，
“导航器”，
],
数据集：[
{
数据：[700500400600300100]，
背景色：[“f56954”、“00a65a”、“f39c12”、“00c0ef”、“3c8dbc”、“d2d6de”]，
}
]
}
//获取图表画布
var ctx=document.getElementById（“myChart”）.getContext（“2d”）；
变量选项={
工具提示：{
已启用：false
},
插件：{
标签：[
{
渲染：“标签”，
位置：'外部'，
fontColor:“#000”，
尺寸：15
},
{
渲染：“百分比”，
fontColor:“#000”，
尺寸：10，
位置：'边界'，
}
]
}
};
//使用图表画布创建图表
var myChart=新图表（ctx{
键入“pie”，
数据：图表数据，
选项：选项
});
我尝试了很多方法来寻找解决方案，但还没有找到。非常感谢。这看起来像是在动画的中途拍摄的。尝试在
选项中禁用animantionvar options = {
animation: false,
// ...
}