Chartjs Graph未显示在colorbox中

Question

I am trying to display a Doughnut Chart in the popup(colorbox) with the dummy values but it is giving error, but if i simply call it in browser(via url) it display the graph.

IndexSizeError: Index or size is negative or greater than the allowed amount.

  var DoughnutChart = [{ value: 60, color: "#fcc79e" }, { value: 30, color: "#beefd2" }, { value: 50, color: "#ffddfb" }, { value: 20, color: "#cdecff" }, { value: 90, color: "#fff5bc" }]; var myDoughnutChart = new Chart(document.getElementById("canvas").getContext("2d")).Doughnut(DoughnutChart); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <canvas id="canvas" height="450" width="600"></canvas> 

Answer 1

Chart.js needs the canvas to have a rendered size before it can be rendered. So you need to have your chart initialization inside the cbox_complete event hook instead of doing it first and then opening the colorbox

Something like

$(document).bind('cbox_complete', function () {
    var DoughnutChart = [{
        ...

        ...
    var myDoughnutChart = new Chart(document.getElementById("canvas").getContext("2d")).Doughnut(DoughnutChart);
});