jquery 使用 Chart.js 加载

Question

我正在使用 JQuery Load 加载页面的部分内容，并希望使用 Chart.js 插件构建图表作为页面的一部分。加载 html 加载良好，并且如果您刷新页面，图表就会构建，但只是有时，它永远不会在首页加载时构建图表。我在这里需要延期还是 promise ？

Answer 1

是的，如果您使用 jQuery .load() 加载带有 canvas 元素的 HTML，则需要将图表初始化放在完整的回调中，如下所示

$("#result").load("canvas.html", function () {
    var data = {
        labels: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
        datasets: [
            {
                data: [12, 23, 23, 43, 45, 12, 33]
            }
        ]
    };

    var ctx = document.getElementById("myChart").getContext("2d");
    var myLineChart = new Chart(ctx).Line(data);
});

canvas.html 在哪里

<canvas id="myChart" height="300" width="500"></canvas>

---

加载数据时， Canvas 元素需要具有非零渲染大小，否则图表将不会显示。

在大多数情况下，将新图表...放在正确的位置(例如在回调中、在选项卡可见之后等)就足够了。当无法识别这样的点时，可以使用具有足够延迟的 setTimeout 来保证 Canvas 元素的渲染。