javascript - ChartJS : Uncaught TypeError: Cannot read property 'call' of undefined

标签 javascript csv chart.js papaparse

我正在使用 ChartJS 呈现一些从 CSV 解析的数据。 CSV 解析良好——我可以使用控制台日志和其他方法验证这一点。然后我生成数组以编程方式提供给 ChartJS。这个数组在控制台中对我来说也很好,但显然它不起作用,因为 ChartJS 给我这个错误:

Uncaught TypeError: Cannot read property 'call' of undefined

这是我的代码:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
<script src="https://localspace/js/papaparse.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js"  type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/randomcolor/0.3.1/randomColor.min.js"  type="text/javascript"></script>

<script type="text/javascript">
var doughnutChartData = [];
Chart.defaults.global = {
    responsive: false
    // animation: true
}
$(document).ready(function(){
    var parseResults;
    Papa.parse("localspace/csv/06/Referring-Domains.csv", {
        download: true,
        comments: "#",
        // header: true,
        complete: function(results) {
            parseResults = results.data;
            console.log(parseResults);
            for(i=0;i<parseResults.length;i++){
                if(i!=0&&i<6){
                    $( "#referringDomainsTable tbody" ).append( "<tr><td>"+parseResults[i][1]+"</td><td>"+parseResults[i][2]+"</td><td>"+parseResults[i][3]+"</td></tr>" );
                    doughnutChartData.push({
                        value: parseResults[i][3].slice(0,-1),
                        color: randomColor(),
                        label: parseResults[i][1]
                    });
                }
            }
            console.log(doughnutChartData);
            setTimeout(function(){
                // Get context with jQuery - using jQuery's .get() method.
                var ctx = $("#referringDomainsChart").get(0).getContext("2d");
                // This will get the first returned node in the jQuery collection.
                var myNewChart = new Chart(ctx).Doughnut(doughnutChartData);
            },3000);
        }
    });  
});
</script>

<h2>Referring Domains</h2>
<canvas id="referringDomainsChart" width="400" height="400"></canvas>
<table id="referringDomainsTable">
    <thead>
        <tr>
            <th>Referring Domains</th>
            <th>Instances</th>
            <th>Percent</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

增加了setTimeout函数,确保数据在数组填充后加载。它对错误没有影响,无论代码是否包装在 setTimeout 中,错误都存在。

请注意,图表实际出现并具有颜色和正确的值——但我仍然遇到此错误,并且标签(或动画,当我取消注释该行时)不起作用。希望有人有答案,感谢阅读。

最佳答案

替换

Chart.defaults.global = {
    responsive: false
    // animation: true
}

Chart.defaults.global.responsive = false;
// Chart.defaults.global.animation = true;

您不想替换所有默认值,只替换您想要的。

关于javascript - ChartJS : Uncaught TypeError: Cannot read property 'call' of undefined,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31434840/

相关文章:

javascript - 数组元素按照字典顺序排列

javascript - jstree - 如何获取实例?

Javascript:如何查看 toString 等 native 函数的源代码实现

python - 如何从 csv 文件中删除重复项

python - 如何在 Google Colab 中读取 csv 到数据框

php - 在 Linux 中创建基于文件的 Cron 作业

javascript - 如何在 Chartjs 中包装图例文本?

javascript - 将带有 calc 的 css 动画转换为 javascript animate

javascript - Chart.js,更改特定刻度的颜色

javascript - 如何在最新的 Chart JS 版本(3.3.2)中创建渐变填充折线图?