Chart.js仅随机出现，在页面刷新时消失

问题描述

尝试使用chart.js，但是我遇到了一个问题，即图表将加载....有时.其他时候没有，并且在页面刷新时消失.有任何想法吗?这已经在Chrome和Safari中进行了测试.

Attempting to use chart.js but I am running into a problem where the chart will load.... sometimes. Other times it doesn't, and it disappears on page refresh. Any ideas? This was tested in Chrome and in Safari.

<canvas id="myChart" width="400px" height="400px"></canvas>

<script>
    $.getJSON('includes/salesjson.php', function(data){
    var lineChartData = {
        labels : data[0],
        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 : data[1]
            }
        ]

    }

window.onload = function(){
    var ctx = document.getElementById("myChart").getContext("2d");
    window.myLine = new Chart(ctx).Line(lineChartData, {
        responsive: false
    });
}
     });

</script>

推荐答案

您在json返回中特别是window.onload放置了错误的代码，具体取决于函数(数据)何时返回此显示图表，并位于经过改进和固定的代码下方(不是经过测试).

You have misplaced code in particular window.onload inside the json return, depending when function(data) return this display chart, below the improved and fixed code (not tested).

$(function(){
        $.getJSON('includes/salesjson.php', function(data){
            var lineChartData = {
                labels : data[0],
                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 : data[1]
                    }
                ]
            };

            var ctx = document.getElementById("myChart").getContext("2d");
            var chart = new Chart(ctx).Line(lineChartData, {
                responsive: false
            });
        });

    });

这篇关于Chart.js仅随机出现，在页面刷新时消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！