在 ajax 加载的页面上使用 chart.js

Question

我得到了一个可以在常规页面上工作的折线图。我有另一个页面，我在其中使用相同的代码，除了该页面是通过 ajax 调用的。该图表未出现在 ajax 调用的页面上。这是我的代码：

<div style="width:30%">
    <div>
        <canvas id="canvas" height="450" width="600"></canvas>
    </div>
</div>

<script>
    var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
    var lineChartData = {
        labels : ["January","February","March","April","May","June","July"],
        datasets : [
            {
                label: "My First dataset",
                fillColor : "rgba(220,220,220,0.2)",
                strokeColor : "rgba(220,220,220,1)",
                pointColor : "rgba(220,220,220,1)",
                pointStrokeColor : "#fff",
                pointHighlightFill : "#fff",
                pointHighlightStroke : "rgba(220,220,220,1)",
                data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
            },
            {
                label: "My Second dataset",
                fillColor : "rgba(151,187,205,0.2)",
                strokeColor : "rgba(151,187,205,1)",
                pointColor : "rgba(151,187,205,1)",
                pointStrokeColor : "#fff",
                pointHighlightFill : "#fff",
                pointHighlightStroke : "rgba(151,187,205,1)",
                data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
            }
        ]

    }

    var ctx = document.getElementById("canvas").getContext("2d");
    var chart = new Chart(ctx).Line(lineChartData, {
        responsive: true
    });
</script>

如何让图表显示在 ajax 加载的页面上？

Answer 1

您的 AJAX 完成后，您 DOM 可能还没有准备好。尝试将 Chart 初始化包装在检查 DOM 是否准备就绪的东西中，就像这样

var interval = setInterval(function(){
    var canvas = document.getElementById("canvas");
    if (canvas) {
        var ctx = document.getElementById("canvas").getContext("2d");
        var chart = new Chart(ctx).Line(lineChartData, {
            responsive: true
        });
        clearInterval(interval)
    }
}, 100)

此外，您可能希望确保确实调用了 ajaxComplete 函数。

在 ajax 加载的页面上使用 chart.js

use chart.js on a page that was loaded by ajax

javascript

ajax

jquery

chart.js