Question

我想将饼图放在我的 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',
                            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>

我尝试了很多方法来找到解决方案，但还是找不到。非常感谢。

Answer 1

这看起来像是在动画中途发生的捕获。尝试在您的 options 对象中禁用动画：

var options = {
    animation: false,

    // ...
    }

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

1 个答案: