发表新帖
发表新帖

Converting Chart.js canvas chart to image using .toDataUrl() results in blank image

前端 未结
关注
7 1963
失恋的感觉
失恋的感觉 2020-11-30 23:57

I am using Chart.js. I am trying to convert the chart to an image by getting a base 64 string. The tutorial (http://www.chartjs.org/docs/) devotes an entire 1 line on the to

相关标签:
7条回答
  • 無奈伤痛
    2020-12-01 00:01

    Chart.JS API has changed since this was posted and older examples did not seem to be working for me. here is an updated fiddle that works on the newer versions

    HTML:

    <body>
    <canvas id="canvas" height="450" width="600"></canvas>
    <img id="url" />
</body>

    JS:

    function done(){
  alert("haha");
  var url=myLine.toBase64Image();
  document.getElementById("url").src=url;
}

var options = {
  bezierCurve : false,
  animation: {
    onComplete: done
  }
};

var myLine = new 
   Chart(document.getElementById("canvas").getContext("2d"),
     {
        data:lineChartData,
        type:"line",
        options:options
      }
    );

    http://jsfiddle.net/KSgV7/585/

    0 讨论(0)
  • 夕颜
    2020-12-01 00:02

    First convert your Chart.js canvas to base64 string.

    var url_base64 = document.getElementById('myChart').toDataURL('image/png');

    Set it as a href attribute for anchor tag.

    link.href = url_base64;

    <a id='link' download='filename.png'>Save as Image</a>

    0 讨论(0)
  • 醉酒成梦
    2020-12-01 00:03

    You should use the Chartjs API function toBase64Image() instead and call it after the animation is complete. Therefore:

    var pieChart, URI;

var options = {
    animation : {
        onComplete : function(){    
            URI = pieChart.toBase64Image();
        }
    }
};

var content = {
    type: 'pie', //whatever, not relevant for this example
    data: {
        datasets: dataset //whatever, not relevant for this example
    },
    options: options        
};    

pieChart = new Chart(pieChart, content);

    Example

    You can check this example and run it

    var chart = new Chart(ctx, {
   type: 'bar',
   data: {
      labels: ['Standing costs', 'Running costs'], // responsible for how many bars are gonna show on the chart
      // create 12 datasets, since we have 12 items
      // data[0] = labels[0] (data for first bar - 'Standing costs') | data[1] = labels[1] (data for second bar - 'Running costs')
      // put 0, if there is no data for the particular bar
      datasets: [{
         label: 'Washing and cleaning',
         data: [0, 8],
         backgroundColor: '#22aa99'
      }, {
         label: 'Traffic tickets',
         data: [0, 2],
         backgroundColor: '#994499'
      }, {
         label: 'Tolls',
         data: [0, 1],
         backgroundColor: '#316395'
      }, {
         label: 'Parking',
         data: [5, 2],
         backgroundColor: '#b82e2e'
      }, {
         label: 'Car tax',
         data: [0, 1],
         backgroundColor: '#66aa00'
      }, {
         label: 'Repairs and improvements',
         data: [0, 2],
         backgroundColor: '#dd4477'
      }, {
         label: 'Maintenance',
         data: [6, 1],
         backgroundColor: '#0099c6'
      }, {
         label: 'Inspection',
         data: [0, 2],
         backgroundColor: '#990099'
      }, {
         label: 'Loan interest',
         data: [0, 3],
         backgroundColor: '#109618'
      }, {
         label: 'Depreciation of the vehicle',
         data: [0, 2],
         backgroundColor: '#109618'
      }, {
         label: 'Fuel',
         data: [0, 1],
         backgroundColor: '#dc3912'
      }, {
         label: 'Insurance and Breakdown cover',
         data: [4, 0],
         backgroundColor: '#3366cc'
      }]
   },
   options: {
      responsive: false,
      legend: {
         position: 'right' // place legend on the right side of chart
      },
      scales: {
         xAxes: [{
            stacked: true // this should be set to make the bars stacked
         }],
         yAxes: [{
            stacked: true // this also..
         }]
      },
      animation : {
         onComplete : done
      }      
   }
});

function done(){
    alert(chart.toBase64Image());
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="ctx" width="700"></canvas>

    0 讨论(0)
  • 不要未来只要你来
    2020-12-01 00:07

    @EH_warch You need to use the Complete callback to generate your base64:

    onAnimationComplete: function(){
    console.log(this.toBase64Image())
}

    If you see a white image, it means you called the toBase64Image before it finished rendering.

    0 讨论(0)
  • 悲&欢浪女
    2020-12-01 00:13

    You can also use the toBase64Image() method setting animation: false

    var options = {
    bezierCurve : false,
    animation: false
};

    Updated Fiddle

    0 讨论(0)
  • 庸人自扰
    2020-12-01 00:16

    The chart seem to be async so you will probably need to provide a callback when the animation has finished or else the canvas will be empty.

    var options = {
    bezierCurve : false,
    onAnimationComplete: done  /// calls function done() {} at end
};
    0 讨论(0)
 看不清?
提交回复
热议问题