Question

我对我的图表使用chart.js，并希望在画布上使用.toDataURL。

我尝试通过回调函数onAnimationCompleted完成动画后获取URL，但我的URL包含空图像。如果我发出警报（请参阅注释），则会在视觉上完成动画之前显示警报。

这是HTML

<h1>Chart as img</h1>
<img id="foobar" src="" />

<h1>Original Canvas</h1>
<canvas id="myChart" width="300" height="300"></canvas>

和JS：

var ctx = $("#myChart");
var myChart = new Chart(ctx, {
    type: 'doughnut',
    data: {
        labels: ["Red", "Blue",],
        datasets: [{
            data: [
                12,
                19
            ],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
            ],
            borderWidth: 1
        }]
    },
    options: {
        responsive: false,
        legend: {
            display: false,
        },
        onAnimationComplete: done(),
    }
});

function done() {
    var url = document.getElementById("myChart").toDataURL();
    // alert(url);
    $("#foobar").attr("src", url);
}

http://jsfiddle.net/7tjgf582/

Answer 1

简单。不要调用 done函数。

options: {
    responsive: false,
    legend: {
        display: false,
    },
    onAnimationComplete: done // <--- no parentheses!
}

Answer 2

我认为这种情况正在发生，因为在浏览器中执行脚本时，您的函数直接为called。那不是回调。你可以试试这个：

var done = function () {
    var url = document.getElementById("myChart").toDataURL();
    // alert(url);
    $("#foobar").attr("src", url);
}

进一步说：

//Notice how I am using the variable instead of calling the function.
onAnimationComplete: done

onAnimationComplete在动画完成之前执行

2 个答案: