canvasjs 渲染不是函数

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 扩展了数组原型，他们会错误地假设数组是非空的，您会收到错误消息（有关此类问题的讨论，请参阅 Why is using "for...in" with array iteration a bad idea?）。

查看我的错误报告：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 行）自行修补：

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

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

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

编辑：根据下面的评论，此错误现已正式修复。

canvasjs 渲染不是函数

canvasjs render is not a function

function

render

canvasjs