javascript - javascript 函数中出现错误 - "chartobject-1.render() Error >> Unable to find the container DOM element."-6ren

javascript - javascript 函数中出现错误 - "chartobject-1.render() Error >> Unable to find the container DOM element."

转载作者：行者123 更新时间：2023-11-28 05:52:36

我正在使用融合图表，我使用 javascript 在 html 页面中显示 2 个图表。单独我可以显示 2 个图表，但当我想一次显示 2 个图表时，我收到错误消息 - “fusioncharts.js:71 Uncaught RuntimeException: #03091456 Chartobject-1.render() Error >> Unable找到容器 DOM 元素。”我在这一行的第二个 javascript 函数中遇到错误”}).render();"

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

    <script src="FusionChartsXT/fusioncharts.js"></script>
    <script>
        FusionCharts.ready(function () {
            var csatscorechart = new FusionCharts({
                type: 'angulargauge',
                renderat: 'chart-container',
                width: '400',
                height: '300',
                dataformat: 'json',
                datasource: {
                    "chart": {
                        "caption": "ph level in pond",
                        "subcaption": "current ph level",
                        "lowerlimit": "0",
                        "upperlimit": "14",
                        "showgaugeborder": "1",
                        "gaugebordercolor": "{dark-30}",
                        "gaugeborderthickness": "5",
                        "gaugeborderalpha": "14",
                        "showvalue": "1",
                        "valuebelowpivot": "1",
                        "theme": "fint"
                    },
                    "colorrange": {
                        "color": [
                            {
                                "minvalue": "0",
                                "maxvalue": "4",
                                "code": "#e44a00"
                            },
                            {
                                "minvalue": "5",
                                "maxvalue": "10",
                                "code": "#6baa01"
                            },
                            {
                                "minvalue": "10",
                                "maxvalue": "14",
                                "code": "#f8bd19"
                            }
                        ]
                    },
                    "dials": {
                        "dial": [{
                            "value": "7"
                        }]
                    }
                }
            }).render();
        });

        //Tempreture sensor charts 
        FusionCharts.ready(function(){
            var fusionchartstemp = new FusionCharts({
                    type: 'thermometer',
                renderAt: 'chart-containertemp',
                id: 'myThm',
                width: '240',
                height: '310',
                dataFormat: 'json',
                dataSource: {
                        "chart": {
                                "caption": "Temperature Monitor",
                                "subcaption": " Central cold store",
                                "lowerLimit": "-10",
                                "upperLimit": "0",
                                "decimals": "1",
                                "numberSuffix": "°C",
                                "showhovereffect": "1",
                                "thmFillColor": "#008ee4",
                                "showGaugeBorder": "1",
                                "gaugeBorderColor": "#008ee4",
                                "gaugeBorderThickness": "2",
                                "gaugeBorderAlpha": "30",
                                "thmOriginX": "100",
                                "chartBottomMargin": "20",
                                "valueFontColor": "#000000",
                               "theme": "fint"
                            },
                            "value": "-6",
                            //All annotations are grouped under this element
                        "annotations": {
                                "showbelow": "0",
                                "groups": [{
                                        //Each group needs a unique ID
                                        "id": "indicator",
                                        "items": [
                                            //Showing Annotation
                                            {
                                        "id": "background",
                                        //Rectangle item
                                            "type": "rectangle",
                                            "alpha": "50",
                                            "fillColor": "#AABBCC",
                                            "x": "$gaugeEndX-40",
                                            "tox": "$gaugeEndX",
                                            "y": "$gaugeEndY+54",
                                            "toy": "$gaugeEndY+72"
                                        }
                                ]
                            }]

         },
     },
    "events": {
                    "initialized": function(evt, arg) {
                            evt.sender.dataUpdate = setInterval(function() {
                                    var value,
                                        prevTemp = evt.sender.getData(),
                                        mainTemp = (Math.random() * 10) * (-1),
                                        diff = Math.abs(prevTemp - mainTemp);

                                    diff = diff > 1 ? (Math.random() * 1) : diff;
                                    if (mainTemp > prevTemp) {
                                            value = prevTemp + diff;
                                        } else {
                                            value = prevTemp - diff;
                                        }

                                    evt.sender.feedData("&value=" + value);

                                }, 3000);
                            updateAnnotation = function(evtObj, argObj) {
                                    var code,
                                        chartObj = evtObj.sender,
                                        val = chartObj.getData(),
                                        annotations = chartObj.annotations;

                                    if (val >= -4.5) {
                                            code = "#00FF00";
                                        } else if (val < -4.5 && val > -6) {
                                                code = "#ff9900";
                                            } else {
                                                code = "#ff0000";
                                            }
                                    annotations.update("background", {
                                            "fillColor": code
                                    });
                            };
                    },
        'renderComplete': function(evt, arg) {
                        updateAnnotation(evt, arg);
                    },
        'realtimeUpdateComplete': function(evt, arg) {
                        updateAnnotation(evt, arg);
                    },
        'disposed': function(evt, arg) {
                        clearInterval(evt.sender.dataUpdate);
                    }
            }
        }
        );
            fusionchartstemp.render();
        });



    </script>
</head>
<body>

    <div align="center">
        <h1>
            Pond Gaurd
        </h1>
        <table>
            <tr>
                <td>

                    <div id="chart-container">FusionCharts will render here</div>

                </td>

                <td>
                    <div id="chart-containertemp">FusionCharts XT will load here!</div>

                </td>

            </tr>
        </table>
        <div style="height:333px"></div>


    </div>

</body>
</html>

最佳答案

希望你做得很好。在创建图表构造函数时，你提到了“renderat”，应该是“renderAt”，这就是它抛出异常“fusioncharts.js:71 Uncaught RuntimeException: #03091456 Chartobject-1.render() 错误的原因” >> 找不到容器DOM元素，请引用更正后的代码，工作正常。谢谢

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

    <script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
    <script type="http://static.fusioncharts.com/code/latest/fusioncharts.charts.js"></script>
    <script>
        FusionCharts.ready(function () {
            var csatscorechart = new FusionCharts({
                type: 'angulargauge',
                renderAt: 'chart-container',
                width: '400',
                height: '300',
                dataformat: 'json',
                datasource: {
                    "chart": {
                        "caption": "ph level in pond",
                        "subcaption": "current ph level",
                        "lowerlimit": "0",
                        "upperlimit": "14",
                        "showgaugeborder": "1",
                        "gaugebordercolor": "{dark-30}",
                        "gaugeborderthickness": "5",
                        "gaugeborderalpha": "14",
                        "showvalue": "1",
                        "valuebelowpivot": "1",
                        "theme": "fint"
                    },
                    "colorrange": {
                        "color": [
                            {
                                "minvalue": "0",
                                "maxvalue": "4",
                                "code": "#e44a00"
                            },
                            {
                                "minvalue": "5",
                                "maxvalue": "10",
                                "code": "#6baa01"
                            },
                            {
                                "minvalue": "10",
                                "maxvalue": "14",
                                "code": "#f8bd19"
                            }
                        ]
                    },
                    "dials": {
                        "dial": [{
                            "value": "7"
                        }]
                    }
                }
            }).render();
        });

        //Tempreture sensor charts 
        FusionCharts.ready(function(){
            var fusionchartstemp = new FusionCharts({
                    type: 'thermometer',
                renderAt: 'chart-containertemp',
                id: 'myThm',
                width: '240',
                height: '310',
                dataFormat: 'json',
                dataSource: {
                        "chart": {
                                "caption": "Temperature Monitor",
                                "subcaption": " Central cold store",
                                "lowerLimit": "-10",
                                "upperLimit": "0",
                                "decimals": "1",
                                "numberSuffix": "°C",
                                "showhovereffect": "1",
                                "thmFillColor": "#008ee4",
                                "showGaugeBorder": "1",
                                "gaugeBorderColor": "#008ee4",
                                "gaugeBorderThickness": "2",
                                "gaugeBorderAlpha": "30",
                                "thmOriginX": "100",
                                "chartBottomMargin": "20",
                                "valueFontColor": "#000000",
                               "theme": "fint"
                            },
                            "value": "-6",
                            //All annotations are grouped under this element
                        "annotations": {
                                "showbelow": "0",
                                "groups": [{
                                        //Each group needs a unique ID
                                        "id": "indicator",
                                        "items": [
                                            //Showing Annotation
                                            {
                                        "id": "background",
                                        //Rectangle item
                                            "type": "rectangle",
                                            "alpha": "50",
                                            "fillColor": "#AABBCC",
                                            "x": "$gaugeEndX-40",
                                            "tox": "$gaugeEndX",
                                            "y": "$gaugeEndY+54",
                                            "toy": "$gaugeEndY+72"
                                        }
                                ]
                            }]

         },
     },
    "events": {
                    "initialized": function(evt, arg) {
                            evt.sender.dataUpdate = setInterval(function() {
                                    var value,
                                        prevTemp = evt.sender.getData(),
                                        mainTemp = (Math.random() * 10) * (-1),
                                        diff = Math.abs(prevTemp - mainTemp);

                                    diff = diff > 1 ? (Math.random() * 1) : diff;
                                    if (mainTemp > prevTemp) {
                                            value = prevTemp + diff;
                                        } else {
                                            value = prevTemp - diff;
                                        }

                                    evt.sender.feedData("&value=" + value);

                                }, 3000);
                            updateAnnotation = function(evtObj, argObj) {
                                    var code,
                                        chartObj = evtObj.sender,
                                        val = chartObj.getData(),
                                        annotations = chartObj.annotations;

                                    if (val >= -4.5) {
                                            code = "#00FF00";
                                        } else if (val < -4.5 && val > -6) {
                                                code = "#ff9900";
                                            } else {
                                                code = "#ff0000";
                                            }
                                    annotations.update("background", {
                                            "fillColor": code
                                    });
                            };
                    },
        'renderComplete': function(evt, arg) {
                        updateAnnotation(evt, arg);
                    },
        'realtimeUpdateComplete': function(evt, arg) {
                        updateAnnotation(evt, arg);
                    },
        'disposed': function(evt, arg) {
                        clearInterval(evt.sender.dataUpdate);
                    }
            }
        }
        );
            fusionchartstemp.render();
        });



    </script>
</head>
<body>

    <div align="center">
        <h1>
            Pond Gaurd
        </h1>
        <table>
            <tr>
                <td>

                    <div id="chart-container">FusionCharts will render here</div>

                </td>

                <td>
                    <div id="chart-containertemp">FusionCharts XT will load here!</div>

                </td>

            </tr>
        </table>
        <div style="height:333px"></div>


    </div>

</body>
</html

关于javascript - javascript 函数中出现错误 - "chartobject-1.render() Error >> Unable to find the container DOM element."，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37971254/

文章推荐： javascript - 对矩阵应用变换并在 Three.js 上重置值

文章推荐： javascript - idangero.us swiper - "Swiper not defined"错误

文章推荐： c++ - 什么是 vtable 锚定，它如何在共享对象中工作？

详解C语言sscanf()函数、vsscanf()函数、vscanf()函数
C语言sscanf()函数：从字符串中读取指定格式的数据头文件： ?
php - 如何解释at()函数； substr()函数;伪代码中的exist()函数
最近，我有一个关于工作预评估的问题，即使查询了每个功能的工作原理，我也不知道如何解决。这是一个伪代码。下面是一个名为foo()的函数，该函数将被传递一个值并返回一个值。如果将以下值传递给foo函数，
VBS教程：函数-CStr 函数
CStr 函数返回表达式，该表达式已被转换为 String 子类型的 Variant。 CStr(expression) expression 参数是任意有效的表达式。说明通常，可以
VBS教程：函数-CSng 函数
CSng 函数返回表达式，该表达式已被转换为 Single 子类型的 Variant。 CSng(expression) expression 参数是任意有效的表达式。说明通常，可
VBS教程：函数-CreateObject 函数
CreateObject 函数创建并返回对 Automation 对象的引用。 CreateObject(servername.typename [, location]) 参数 serv
VBS教程：函数-Cos 函数
Cos 函数返回某个角的余弦值。 Cos(number) number 参数可以是任何将某个角表示为弧度的有效数值表达式。说明 Cos 函数取某个角并返回直角三角形两边的比值。此比值是
VBS教程：函数-CLng 函数
CLng 函数返回表达式，此表达式已被转换为 Long 子类型的 Variant。 CLng(expression) expression 参数是任意有效的表达式。说明通常，您可以使
VBS教程：函数-CInt 函数
CInt 函数返回表达式，此表达式已被转换为 Integer 子类型的 Variant。 CInt(expression) expression 参数是任意有效的表达式。说明通常，可
VBS教程：函数-Chr 函数
Chr 函数返回与指定的 ANSI 字符代码相对应的字符。 Chr(charcode) charcode 参数是可以标识字符的数字。说明从 0 到 31 的数字表示标准的不可打印的
VBS教程：函数-CDbl 函数
CDbl 函数返回表达式，此表达式已被转换为 Double 子类型的 Variant。 CDbl(expression) expression 参数是任意有效的表达式。说明通常，您可
VBS教程：函数-CDate 函数
CDate 函数返回表达式，此表达式已被转换为 Date 子类型的 Variant。 CDate(date) date 参数是任意有效的日期表达式。说明 IsDate 函数用于判断 d
VBS教程：函数-CCur 函数
CCur 函数返回表达式，此表达式已被转换为 Currency 子类型的 Variant。 CCur(expression) expression 参数是任意有效的表达式。说明通常，
VBS教程：函数-CByte 函数
CByte 函数返回表达式，此表达式已被转换为 Byte 子类型的 Variant。 CByte(expression) expression 参数是任意有效的表达式。说明通常，可以
VBS教程：函数-CBool 函数
CBool 函数返回表达式，此表达式已转换为 Boolean 子类型的 Variant。 CBool(expression) expression 是任意有效的表达式。说明如果 ex
VBS教程：函数-Atn 函数
Atn 函数返回数值的反正切值。 Atn(number) number 参数可以是任意有效的数值表达式。说明 Atn 函数计算直角三角形两个边的比值 (number) 并返回对应角的弧
VBS教程：函数-Asc 函数
Asc 函数返回与字符串的第一个字母对应的 ANSI 字符代码。 Asc(string) string 参数是任意有效的字符串表达式。如果 string 参数未包含字符，则将发生运行时错误。
VBS教程：函数-Array 函数
Array 函数返回包含数组的 Variant。 Array(arglist) arglist 参数是赋给包含在 Variant 中的数组元素的值的列表（用逗号分隔）。如果没有指定此参数，则
VBS教程：函数-Abs 函数
Abs 函数返回数字的绝对值。 Abs(number) number 参数可以是任意有效的数值表达式。如果 number 包含 Null，则返回 Null；如果是未初始化变量，则返回 0。
VBS教程：函数-FormatPercent 函数
FormatPercent 函数返回表达式，此表达式已被格式化为尾随有 % 符号的百分比（乘以 100 ）。 FormatPercent(expression[,NumDigitsAfterD
VBS教程：函数-FormatNumber 函数
FormatNumber 函数返回表达式，此表达式已被格式化为数值。 FormatNumber( expression [,NumDigitsAfterDecimal [,Inc

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - javascript 函数中出现错误 - "chartobject-1.render() Error >> Unable to find the container DOM element."