Question

我是新来的，请原谅我的错误。我正在使用外部URL的json文件处理个人项目。但图表没有显示出来。 Chrome编译器说 Chart.min.js：12 Uncaught TypeError：t.ticks.map不是函数 Chart.min.js：12 Uncaught TypeError：无法读取属性＆＃39; initialize＆＃39; of undefinedeventHandler @ Chart.min.js：12（匿名函数）@ Chart.min.js：12i。（匿名函数）@ Chart.min.js：12 注意：数组正在获取值（对不起，如果我问这个错误的方式，我会尝试改进我的问题）

<html>
 <head>
 <script type="text/javascript" src="Chart.min.js"></script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    </head>
    <body>
        <canvas id="myChart" width="400" height="200"></canvas>
        <script>
            var name;
            var count;
            $(document).ready(function () {
                var jsonurl = "http://avare.pe.hu/veri2.json";

                $.getJSON(jsonurl, function (json) {


                    name = json[0]['names'];
                    count = json[0]['count'];
                    for (var i = 0; i < 5; i++)
                        console.log(name[i] + count[i]);


                });
            })



            var canvas = document.getElementById('myChart');
            var dataSet = {
                labels: name,
                datasets: [
                    {
                        label: "My First dataset",
                        backgroundColor: "rgba(255,99,132,0.2)",
                        borderColor: "rgba(255,99,132,1)",
                        borderWidth: 2,
                        hoverBackgroundColor: "rgba(255,99,132,0.4)",
                        hoverBorderColor: "rgba(255,99,132,1)",
                        data: count,
                    }
                ]
            };
            var option = {
                animation: {
                    duration: 5000
                }

            };


            var myBarChart = Chart.Bar(canvas, {
                data: dataSet,
                options: option
            });
        </script>
    </body>
</html>

Answer 1

问题来自异步调用以获取数据。您在此调用后开始图表初始化，但因为它在您创建图表时是异步name而count将是undefined。

快速解决方法是将图表创建放在getJSON

的成功回调中

https://fiddle.jshell.net/leighking2/45x1f09v/

使用url的json文件绘制js图表

1 个答案: