在chartjs中打印饼图

时间:2016-10-05 01:32:34

标签: javascript pdf printing charts chart.js

我遇到了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>

2 个答案:

答案 0 :(得分:0)

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

  • 抓住饼图的画布并将其转换为图像:document.getElementbyId('pieChart').toDataURL;

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

  • 动态启动html文档,并使用<img>嵌入printContents变量,将先前创建的图像URL附加为template literals元素的来源:让 html = <html><head><title></title></head><body><img src=${printContent}></body></html> https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

-通过将先前构造的html文档即时写入打印窗口来执行打印作业(Chrome):

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

printWindow.document.open();

printwindow.document.write(html);

printWindow.document.close();

答案 1 :(得分:0)

是的,这与动画有关。您需要检查动画是否完整。在选项下添加:

    animation: {
    onComplete: done                   
}

,然后在处理打印的过​​程中创建一个“完成”功能。

function done() {

}