Chart.js 带有url中json文件的图表js_Chart.js

Chart.js 带有url中json文件的图表js

chart.js

Chart.js 带有url中json文件的图表js,chart.js,Chart.js,我是新来的，请原谅我问的错误。我正在使用外部url中的json文件处理一个个人项目。但图表没有显示出来。Chrome编译器说 Chart.min.js:12未捕获类型错误：t.ticks.map不是函数 Chart.min.js:12未捕获类型错误：无法读取undefinedeventHandler@Chart.min.js:12（匿名函数）@Chart.min.js:12i.（匿名函数）@Chart.min.js:12的属性“initialize” 注意：数组正在获取值（对不起，如果我问错了

我是新来的，请原谅我问的错误。我正在使用外部url中的json文件处理一个个人项目。但图表没有显示出来。Chrome编译器说 Chart.min.js:12未捕获类型错误：t.ticks.map不是函数 Chart.min.js:12未捕获类型错误：无法读取undefinedeventHandler@Chart.min.js:12（匿名函数）@Chart.min.js:12i.（匿名函数）@Chart.min.js:12的属性“initialize” 注意：数组正在获取值（对不起，如果我问错了，我会努力改进我的问题）


变量名；
var计数；
$（文档）.ready（函数（）{
var jsonurl=”http://avare.pe.hu/veri2.json";
$.getJSON（jsonurl，函数（json）{
name=json[0]['names']；
count=json[0]['count']；
对于（变量i=0；i<5；i++）
console.log（名称[i]+计数[i]）；
});
})
var canvas=document.getElementById（'myChart'）；
变量数据集={
标签：名称，
数据集：[
{
标签：“我的第一个数据集”，
背景颜色：“rgba（255,99132,0.2）”，
边框颜色：“rgba（255,99132,1）”，
边界宽度：2，
hoverBackgroundColor:“rgba（255,99132,0.4）”，
hoverBorderColor:“rgba（255,99132,1）”，
数据：计数，
}
]
};
var选项={
动画：{
持续时间：5000
}
};
var myBarChart=Chart.Bar（画布{
数据：数据集，
选项：选项
});

问题来自获取数据的异步调用。此调用后启动图表初始化，但由于它是异步的

name

和

count

，因此在创建图表时将

未定义
快速修复方法是将图表创建放在getJSON

在获取值之前，您正在创建图表，图表的创建应在getJSON调用成功后进行。如果您正在将未定义的数据传递给图表，请感谢。工作非常顺利。
<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>