canvasjs 渲染不是一个函数答案

【问题标题】：canvasjs render is not a functioncanvasjs 渲染不是一个函数
【发布时间】：2015-10-27 18:56:44
【问题描述】：

我正在尝试使用 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>

我在我的机器上尝试了相同的代码，它运行正常，但是当我将它上传到我的服务器时，我收到了前面提到的错误。

有人知道这里出了什么问题吗？

谢谢！

【问题讨论】：

标签： function render canvasjs

【解决方案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/ 并复制此内容：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();
    }
}

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

【讨论】：

此问题已在 1.7.5 中修复，不会出现在 1.8.0GA 中。请参考this。