首页 > 解决方案 > Chartjs 导出 ImageExports 空暗图像

问题描述

我正在尝试使用 chartjs 导出图表的图像,但它只显示黑屏。我做错了什么?

options: {
                responsive: true,
                maintainAspectRatio: false,
                animation: {
                    onComplete: function(animation){
                        document.getElementById("download").addEventListener('click', function(){
                            var url_base64jp = document.getElementById("labChart").toDataURL("image/png");
                            var a = document.getElementById("document");
                            a.href = url_base64jp;
                        });
                        
                    }
                },

我的按钮

<a id='download' download='invoice-report.png' href="" 
                    class="btn btn-primary pull-right bg-flat-color-1"
                    title="Invoice Report">
                    Save as Image</a>

标签: javascriptchart.js

解决方案


我添加了这段代码来使背景变白:

Chart.plugins.register({
    afterRender: function(c) {
        var ctx = c.chart.ctx;
        ctx.save();

        ctx.globalCompositeOperation = 'destination-over';
        ctx.fillStyle = 'white';
        ctx.fillRect(0, 0, c.chart.width, c.chart.height);
        ctx.restore();
    }
});

推荐阅读