个人中心
gpt4 book ai didi

javascript - 在chartjs中打印饼图

转载 作者：行者123 更新时间：2023-11-29 15:25:17 24 4
gpt4 key购买 nike

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

最佳答案

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

  • 捕获饼图的 Canvas 并将其转换为图像:document.getElementbyId('pieChart').toDataURL;

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

  • 动态启动 html 文档并将之前创建的图像 URL 附加为 <img>元素的来源，使用 template literals嵌入 printContents 变量:让 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();

关于javascript - 在chartjs中打印饼图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39864143/

24 4 0
文章推荐： Android ListView ClickListener
文章推荐： android - 解析数组中的json数据数组
文章推荐： android - 如何在 xml 中将整个 LinearLayout 居中？
文章推荐： android 错误或配置对象的误用？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com