[Chart.js首次加载页面时不显示

Question

第一次加载页面时，我正在使用chartjs，因此该图将不会显示。当我检查元素或刷新网页两到三次时，显示图。我使用在google或stack上找到的每种方法，但不能解决我的问题。

这里是脚本的代码

var barChartCanvas = $("#barChart").get(0).getContext("2d");
    var barChart = new Chart(barChartCanvas);
    //var barChartData = areaChartData;
    //barChartData.datasets[1].fillColor = "#00a65a";
    //barChartData.datasets[1].strokeColor = "#00a65a";
    //barChartData.datasets[1].pointColor = "#00a65a";



    var barChartData = {
        //labels: ["January", "February", "March", "April", "May", "June", "July"],
        labels: <?= json_encode($WEEK_NOS); ?>,
        datasets: [
            {
                label: "Packing Target",
//                    fillColor: "rgba(210, 214, 222, 1)",
                fillColor: "rgba(210, 214, 222, 1)",
                strokeColor: "rgba(210, 214, 222, 1)",
                pointColor: "rgba(210, 214, 222, 1)",
                pointStrokeColor: "#c1c7d1",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(220,220,220,1)",
                data: <?= json_encode($PACKING_TARGET); ?>
                //data: [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]

            },
                            {
                label: "Fabric Despatch",
 //                    fillColor: "rgba(210, 214, 222, 1)",
                fillColor: "rgba(0, 255, 0, 1)",
                strokeColor: "rgba(210, 214, 222, 1)",
                pointColor: "rgba(210, 214, 222, 1)",
                pointStrokeColor: "#c1c7d1",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(220,220,220,1)",
                data: <?= json_encode($SM_OGP_MTRS); ?>
                //data: [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]

            },
                            {
                label: "Remaining",
     //                    fillColor: "rgba(210, 214, 222, 1)",
                fillColor: "rgba(214, 0, 22, 122)",
                strokeColor: "rgba(210, 214, 222, 1)",
                pointColor: "rgba(210, 214, 222, 1)",
                pointStrokeColor: "#c1c7d1",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(220,220,220,1)",
                data: <?= json_encode($REMAINING); ?>
                //data: [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]

            }

        ]
    };

    var barChartOptions = {
        //Boolean - Whether the scale should start at zero, or an order of magnitude down from the lowest value
        scaleBeginAtZero: true,
        //Boolean - Whether grid lines are shown across the chart
        scaleShowGridLines: true,
        //String - Colour of the grid lines
        scaleGridLineColor: "rgba(0,0,0,.05)",
        //Number - Width of the grid lines
        scaleGridLineWidth: 1,
        //Boolean - Whether to show horizontal lines (except X axis)
        scaleShowHorizontalLines: true,
        //Boolean - Whether to show vertical lines (except Y axis)
        scaleShowVerticalLines: true,
        //Boolean - If there is a stroke on each bar
        barShowStroke: true,
        //Number - Pixel width of the bar stroke
        barStrokeWidth: 2,
        //Number - Spacing between each of the X value sets
        barValueSpacing: 5,
        //Number - Spacing between data sets within X values
        barDatasetSpacing: 1,
        //String - A legend template
        legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].fillColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>",
        multiTooltipTemplate: "<%= datasetLabel %> - <%= value %>",
        //Boolean - whether to make the chart responsive
        responsive: true,
        maintainAspectRatio: true
    };

    //barChartOptions.datasetFill = false;
    barChart.Bar(barChartData, barChartOptions);



        function showTooltip(x, y, contents) {
    $('<div id="tooltip" class="tooltip top in"><div class="tooltip-inner">' + contents + '<\/div><\/div>').css({
        display: 'none',
        top: y - 40,
        left: x - 55,
    }).appendTo("body").fadeIn(200);
}
$(".flot-x-axis.flot-x1-axis.xAxis.x1Axis").find($(".flot-tick-label.tickLabel")).hide() 

我不知道我在哪里犯错。请帮忙。提前致谢。

Answer 1

您似乎正在使用jQuery。尝试在document.load事件或window.load事件中包含JavaScript代码。这是区别的解释。https://coderwall.com/p/_jothq/jquery-when-to-use-document-ready-and-when-window-load