Question

我尝试使用CanvasJS创建图表，但我收到以下错误：

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

代码是他们网站上的示例代码：

<!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>

我在我的计算机上尝试过相同的代码并且工作正常，但当我将其上传到我的服务器时，我收到了前面提到的错误。

有谁知道这里有什么问题？

谢谢！

Answer 1

问题是Canvas.js中的一个错误 - 他们正在使用“for ... in”来迭代一个数组，但是如果任何其他Javascript扩展了Array原型，他们错误地认为该数组是非空的并且你得到错误（有关此类问题的讨论，请参阅Why is using "for...in" with array iteration a bad idea?。）

请参阅我的错误报告：http://canvasjs.com/forums/topic/canvas-js-javascript-bug/并简化复制：http://jsfiddle.net/QwZuf/298/

如果您愿意暂时使用非缩小代码，可以使用“canvasjs.js”自行修补并找到以下内容（1.7.0 GA中的第2406行）：

for (index in plotAreaElements) {
  plotAreaElements[index].render();
}

将它包裹在一个简单的长度测试中，你应该没问题，直到官方补丁可用：

if (plotAreaElements.length > 0) {
    for (index in plotAreaElements) {
        plotAreaElements[index].render();
    }
}

编辑：根据以下评论，此错误现已正式修补。

canvasjs渲染不是一个函数

1 个答案: