Question

我使用chart.js编写了以下代码，用于创建图表并在单击按钮时下载，但现在我无法调整相同的代码，以便在页面加载时下载图像，以便有没有用户交互，并且在触发页面时我有下载的图像。

<html>
  <head>



  <script type="text/javascript" src="https://cdn.rawgit.com/eligrey/canvas-toBlob.js/master/canvas-toBlob.js"></script>
   <script type="text/javascript" src="Chart.js"></script>

<script type="text/javascript" src="https://cdn.rawgit.com/eligrey/FileSaver.js/master/FileSaver.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7" crossorigin="anonymous"></script>  
  </head>

  <body>
    <canvas id="myChart" width="400" height="400"></canvas>
<br/><br/>
<button id="save-btn">Save Chart Image</button>

    <script>
      // Get the context of the canvas element we want to select


var data = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [
        {
            label: "My First dataset",
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1,
            data: [65, 59, 80, 81, 56, 55, 40],
        }
    ]
};


var ctx = document.getElementById("myChart").getContext("2d");
var myNewChart = new Chart(ctx).Bar(data);


$("#save-btn").click(function() {
  $("#myChart").get(0).toBlob(function(blob) {
    saveAs(blob, "chart_1");
  });
});

    </script>
  </body>

</html>

请建议我解决。谢谢。

Answer 1

这可以通过在图表选项中添加以下代码来实现......

onAnimationComplete: function() {
   $("#save-btn").click();
}

这是一个有效的例子......

＆＃13;

<html>
   <head>
      <script type="text/javascript" src="https://cdn.rawgit.com/eligrey/canvas-toBlob.js/master/canvas-toBlob.js"></script>
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
      <script type="text/javascript" src="https://cdn.rawgit.com/eligrey/FileSaver.js/master/FileSaver.min.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7" crossorigin="anonymous"></script>
   </head>

   <body> <canvas id="myChart" width="400" height="400"></canvas> <br/> <br/> <button id="save-btn">Save Chart Image</button>
      <script>
         // Get the context of the canvas element we want to select
         var data = {
            labels: ["January", "February", "March", "April", "May", "June", "July"],
            datasets: [
               {
                  label: "My First dataset",
                  backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
                  borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
                  borderWidth: 1,
                  data: [65, 59, 80, 81, 56, 55, 40],
        }
    ]
         };
         var ctx = document.getElementById("myChart").getContext("2d");
         var myNewChart = new Chart(ctx).Bar(data, {
            onAnimationComplete: function() {
               $("#save-btn").click();
            }
         });
         $("#save-btn").click(function() {
            $("#myChart").get(0).toBlob(function(blob) {
               saveAs(blob, "chart_1");
            });
         });
      </script>
   </body>
</html>

＆＃13;

注意： 请注意，在页面加载时系统会提示用户输入

在加载时运行该功能

1 个答案: