在chartjs中打印饼图

Question

我在使用 chartjs 时遇到问题。我只是 想用饼图打印div#browser 里面的内容。图表 很好而且很生动，但问题是在我打印馅饼的过程中 图表消失了，但是当我再次刷新它就很好了。这 除饼图外，其他图表在打印时效果很好。我相信 它的原因是在动画什么的

chartjs 脚本

<script>
    var pieChartCanvas = $("#pieChart").get(0).getContext("2d");
      var pieChart = new Chart(pieChartCanvas);
      var PieData = [
        {
          value: 700,
          color: "#f56954",
          highlight: "

        #f56954",
              label: "Chrome"
            },
            {
              value: 500,
              color: "#00a65a",
              highlight: "#00a65a",
              label: "IE"
            },
            {
              value: 400,
              color: "#f39c12",
              highlight: "#f39c12",
              label: "FireFox"
            },
            {
              value: 600,
              color: "#00c0ef",
              highlight: "#00c0ef",
              label: "Safari"
            },
            {
              value: 300,
              color: "#3c8dbc",
              highlight: "#3c8dbc",
              label: "Opera"
            },
            {
              value: 100,
              color: "#d2d6de",
              highlight: "#d2d6de",
              label: "Navigator"
            }
          ];
          var pieOptions = {
            //Boolean - Whether we should show a stroke on each segment
            segmentShowStroke: true,
            //String - The colour of each segment stroke
            segmentStrokeColor: "#fff",
            //Number - The width of each segment stroke
            segmentStrokeWidth: 1,
            //Number - The percentage of the chart that we cut out of the middle
            percentageInnerCutout: 50, // This is 0 for Pie charts
            //Number - Amount of animation steps
            animationSteps: 100,
            //String - Animation easing effect
            animationEasing: "easeOutBounce",
            //Boolean - Whether we animate the rotation of the Doughnut
            animateRotate: true,
            //Boolean - Whether we animate scaling the Doughnut from the centre
            animateScale: false,
            //Boolean - whether to make the chart responsive to window resizing
            responsive: true,
            // Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
            maintainAspectRatio: false,
            //String - A legend template
            legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>",
            //String - A tooltip template
            tooltipTemplate: "<%=value %> <%=label%> users"
          };
          //Create pie or douhnut chart
          // You can switch between pie and douhnut using the method below.
          pieChart.Doughnut(PieData, pieOptions);
    </script>

html

<div id="browser">
 <h3 class="box-title">Browser Usage</h3>
   <a onclick="printContent('browser')">Print</a>
   <div class="chart-responsive">
     <canvas id="pieChart" height="150"></canvas>
   </div>
</div>

打印脚本

<script>
function printContent(el){
  var restorepage = document.body.innerHTML;
  var printcontent = document.getElementById(el).innerHTML;
  document.body.innerHTML = printcontent;
  window.print();
  document.body.innerHTML = restorepage;
}
</script>

Answer 1

尝试在画布上使用.toDataURL() 方法。此方法返回一个包含您的图表作为图像的 URL。 https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL

• 获取饼图的画布并将其转换为图像：document.getElementbyId('pieChart').toDataURL;

• 将生成的图表图像 URL 分配给一个变量，在这种情况下我们继续使用printContents：let **printContents** = document.getElementbyId('pieChart').toDataURL;

• 动态启动一个 html 文档并将之前创建的图像 URL 附加为 <img> 元素的源，使用 template literals 嵌入 printContents 变量：let html = @987654329 @ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

-通过将先前构建的html doc即时写入打印窗口来执行打印作业（Chrome）：

let **printWindow** = window.open('', 'Print-Preview', 'height=900,width=200'); 

printWindow.document.open();

printwindow.document.write(html);

printWindow.document.close();

Answer 2

是的，它与动画有关。您需要检查动画是否完整。在选项下添加：

    animation: {
    onComplete: done                   
}

然后在您处理打印的地方创建一个“完成”函数。

function done() {

}