在由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函數實際上已被調用。