canvas.js渲染不是函数 [英] canvasjs render is not a function
问题描述
我正在尝试使用CanvasJS创建图表，但出现以下错误:
I'm trying to create a chart using CanvasJS but I'm getting the following error:
Uncaught TypeError: b[a].render is not a function
w.render @ canvasjs.min.js:84
Aa.Chart.render @ canvasjs.min.js:412
window.onload @ statistics:107
该代码是在其网站上找到的示例代码:
The code is the example code found on their website:
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer",
{
title:{
text: "Number of Students in Each Room"
},
axisX:{
title: "Rooms"
},
axisY:{
title: "percentage"
},
data: [
{
type: "stackedColumn100",
legendText: "Boys",
showInLegend: "true",
indexLabel: "#percent %",
indexLabelPlacement: "inside",
indexLabelFontColor: "white",
dataPoints: [
{ y: 40, label: "Cafeteria"},
{ y: 10, label: "Lounge" },
{ y: 72, label: "Games Room" },
{ y: 30, label: "Lecture Hall" },
{ y: 21, label: "Library"}
]
},
{
type: "stackedColumn100",
legendText: "Girls",
showInLegend: "true",
indexLabel: "#percent %",
indexLabelPlacement: "inside",
indexLabelFontColor: "white",
dataPoints: [
{ y: 20, label: "Cafeteria"},
{ y: 14, label: "Lounge" },
{ y: 40, label: "Games Room" },
{ y: 43, label: "Lecture Hall" },
{ y: 17, label: "Library"}
]
}
]
});
chart.render();
}
</script>
<script type="text/javascript" src="/assets/script/canvasjs.min.js"></script></head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
</body>
</html>
我已经在计算机上尝试了相同的代码，并且可以正常工作，但是当我将其上传到服务器时，却遇到了前面提到的错误.
I've tried the same code on my machine and it's working fine, but when I upload it to my server, then I'm getting the previously mentioned error.
有人知道这里出了什么问题吗?
Does anyone has any idea what is wrong here?
谢谢！
推荐答案
问题是Canvas.js中的错误-他们使用"for ... in"来遍历数组，但是如果其他任何Javascript已扩展数组原型，他们错误地认为数组是非空的，您会收到错误消息(请参阅讨论此类问题).
The issue is a bug in Canvas.js - they are using "for...in" to iterate over an array, but if any other Javascript has extended the Array prototype they mistakenly assume the array is non-empty and you get the error (see Why is using "for...in" with array iteration a bad idea? for a discussion about this type of problem).
请参阅我的错误报告: http://canvasjs.com/forums/topic/canvas-js-javascript-bug/和小提琴来重现此内容: http://jsfiddle.net/QwZuf/298/
See my bug report: http://canvasjs.com/forums/topic/canvas-js-javascript-bug/ and fiddle reproducing this: http://jsfiddle.net/QwZuf/298/
如果您愿意暂时使用未缩小的代码，则可以通过使用"canvasjs.js"并查找以下内容(在1.7.0 GA中的第2406行)来对此进行修补:
If you're willing to use the non-minified code temporarily, you can patch this yourself by using "canvasjs.js" and locating the following (line 2406 in 1.7.0 GA):
for (index in plotAreaElements) {
plotAreaElements[index].render();
}
将其包装在一个简单的长度测试中，直到正式补丁发布为止，您应该没问题:
Wrap it in a simple length test and you should be fine until an official patch is available:
if (plotAreaElements.length > 0) {
for (index in plotAreaElements) {
plotAreaElements[index].render();
}
}
根据下面的评论，此错误现已正式修补.
这篇关于canvas.js渲染不是函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
