饼图未在 Flask 应用程序中正确呈现

问题描述

我想将饼图放在我的 html 页面上,并通过在 Flask 应用程序中使用 wkhtml2pdf 和 pdfkit 工具将其转换为 pdf。但它不能正确发生。

似乎图表切片不完整,比例计算错误

pie chart after rendering result:

这里是 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,// ...
    }