Question

我正在尝试使用ChartJS创建一个Dounught图表：

$(function() {
    //...

    drawChart();
});

function drawChart() {
    var ctx = document.getElementById("currenciesTag").getContext("2d");

    new Chart(ctx, {
        type: 'doughnut',
        data: {
            labels: ['Label1', 'Label2'],
            datasets: [{
                backgroundColor: ['#000000', '#000000'],
                borderColor: 'rgb(255, 99, 132)',
                data: [1, 2],
            }]
        },
        options: {}
    });
}

实际上，我需要在$（function（）{}中绘制我的图表，因为数据集来自jQuery使用的元素。但是，我的图表没有显示。它的画布已调整大小，因此发生了一些事情。

如果我将drawChart（）的内容放在任何函数之外，它就可以正常显示我的图表。但我需要从$（function（）{}

中绘制它

更新1 的console.log（CTX）：

Answer 1

您可能无法获得ctx。

使用控制台检查：

var ctx = document.getElementById("currenciesTag").getContext("2d");
console.log(ctx);

检查您的HTML并确保您拥有，例如：

<body>
  <canvas id="currenciesTag" width="600" height="400"></canvas>
</body>

您可以在此处看到您的代码：

https://jsfiddle.net/zwjj20L5/

Answer 2

我遇到了同样的问题，要花4.5个小时才能解决它，如果您有的话，该死的没关系

window.onload = function() { }

您

之外

var ctx = document.getElementById('canvas').getContext('2d');

代码只是删除它，然后您就可以在$（function（）{}）之类的任何函数中使用它了；或按钮单击。祝你有美好的一天：）

ChartJS + jQuery =图表未显示

2 个答案: