使用chart.js进行jQuery加载 [英] jquery load with chart.js

问题描述

我正在使用JQuery Load加载页面的一部分，并希望使用chart.js插件将图表构建为页面的一部分.如果刷新页面，则html加载会很好，并且图表会生成，但仅在某些情况下，它不会在加载第一页时构建图表.我需要在这里推迟还是答应?

I'm loading parts of a page with JQuery Load and want to use chart.js plugin to build a chart as part of a page. The load html loads fine and the chart will build if you refresh the page, but only sometimes, it never builds the chart on first page load. Do I need a defer or promise here?

推荐答案

是的，如果您正在使用jQuery .load()使用canvas元素加载HTML，则需要将图表初始化放在完整的回调中，就像这样

Yes, if you are loading the HTML with the canvas element using jQuery .load(), you need to put the chart initialization in the complete callback, like so

$("#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在哪里

where canvas.html is

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

---

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

---

The canvas element needs have a non-zero render size when the data is loaded, otherwise the chart won't show up.

在大多数情况下，将new Chart...放在正确的位置即可(例如，在回调中，选项卡可见后等).如果无法确定这样的点，请使用具有足够延迟的setTimeout来确保呈现canvas元素.

In most cases, putting the new Chart... in the right place (for e.g. in the callback, after a tab is visible, etc.) will be enough. When it's not possible to identify such a point, using a setTimeout with enough delay to guarantee that the canvas element is rendered will work.

这篇关于使用chart.js进行jQuery加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！