如何使用 convasjs 将饼图转换为图像

Question

我正在尝试使用 canvasjs 库将下面的饼图转换为图像。但它没有转换。我没有看到任何错误。请帮助我我在做什么 error.I 已使用 canvasja 将其他图表转换为图像，但此饼图未转换为图像。

      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work',     1],
          ['Eat',      1],
        ]);

        var options = {
          title: 'My Daily Activities'
        };

  
        var chart = new google.visualization.PieChart(document.getElementById('piechart'));
  

        chart.draw(data, options);
      }
   
    
  
    $(function() { 
    $("#divclick").click(function() { 
        html2canvas($("#map-canvas"), {
            useCORS: true,
   onrendered: function (canvas) {
    console.log(canvas);
    $("#show_img").append(canvas);
   
            }
        });
    });
});

<script src="https://cdn.jsdelivr.net/npm/2cs-canvas2image@0.0.2/canvas2image.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Base64/1.1.0/base64.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script src="https://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<input type="button" id="divclick" value="Convert to image" />
<div id="show_img">
<div id="map-canvas">
    <div id="piechart" style="width: 900px; height: 500px;"></div>
  
  </div>

Answer 1

您可以使用 google 个图表中的 getImageURI()

google.charts.load('current', {
  'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Task', 'Hours per Day'],
    ['Work', 1],
    ['Eat', 1],
  ]);

  var options = {
    title: 'My Daily Activities'
  };

  var chart = new google.visualization.PieChart(document.getElementById('piechart'));
  chart.draw(data, options);

  $("#divclick").click(function() {
    var imgUri = chart.getImageURI();

    // downloads the base64 img
    var a = document.createElement("a");
    a.href = imgUri
    a.download = "Image.png";
    a.click();
  });
}

<script src="https://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>

<input type="button" id="divclick" value="Convert to image" />
<div id="piechart" style="width: 900px; height: 500px;"></div>

如何使用 convasjs 将饼图转换为图像

How to convert Pie chart to image using convasjs

javascript

pie-chart