在 javascript 函数中出现错误 - "chartobject-1.render() Error >> Unable to find the container DOM element."
getting error- "chartobject-1.render() Error >> Unable to find the container DOM element." in javascript function
我正在使用融合图表，其中我使用 javascript 在 html 页面中显示 2 个图表。我可以单独显示 2 个图表，但是当我想一次显示 2 个图表时，我收到错误消息 - "fusioncharts.js:71 Uncaught RuntimeException: #03091456 chartobject-1.render() Error >> Unable to find the container DOM element." 我在该行的第二个 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>
希望您正在 well.While 创建您提到的图表构造函数 'renderat' 应该是 'renderAt' 这就是它抛出异常的原因“fusioncharts.js:71 Uncaught RuntimeException: #03091456 chartobject-1.render() Error >> Unable to find the container DOM element.Please 请参阅更正后的代码。它工作正常。
谢谢
<!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 在 html 页面中显示 2 个图表。我可以单独显示 2 个图表，但是当我想一次显示 2 个图表时，我收到错误消息 - "fusioncharts.js:71 Uncaught RuntimeException: #03091456 chartobject-1.render() Error >> Unable to find the container DOM element." 我在该行的第二个 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>
希望您正在 well.While 创建您提到的图表构造函数 'renderat' 应该是 'renderAt' 这就是它抛出异常的原因“fusioncharts.js:71 Uncaught RuntimeException: #03091456 chartobject-1.render() Error >> Unable to find the container DOM element.Please 请参阅更正后的代码。它工作正常。 谢谢
<!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