ChartJS: Uncaught TypeError: Cannot read property 'call' of undefined
ChartJS: Uncaught TypeError: Cannot read property 'call' of undefined
我正在使用 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;
您不想替换所有默认值,只替换您想要的。
我正在使用 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;
您不想替换所有默认值,只替换您想要的。