“未捕获的ReferenceError：图表未定义”
[英]“Uncaught ReferenceError: chart is not defined”
问题描述
all, 
所有，
I'm working with the following HTML/Javascript code: 我正在使用以下HTML / Javascript代码：
<!doctype html>
<html>
<head>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<!-- google fonts from CDN -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600' rel='stylesheet' type='text/css'>
<!-- highcharts -->
<script src="http://code.highcharts.com/highcharts.js"></script>
<style>
html, body {
width: 95%;
margin: auto;
font-family: 'Open Sans',sans-serif;
}
#chart_container {
width:100%;
height:500px;
}
</style>
</head>
<body>
<h1>Live Data</h1>
<div id="chart_container">
</div>
</body>
<script type="text/javascript">
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'chart_container',
defaultSeriesType: 'line',
events: {
load: getBirds
}
},
title: {
text: 'DRHW Live Data Stream'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150,
maxZoom: 20 * 1000
},
yAxis: {
title: {
text: 'Count Observed'
}
},
series: [
],
legend: {
layout: 'horiztonal',
align: 'center'
}
});
function getBirds() {
var now = new Date();
var et = now.getTime() / 1000; //PHP TS
var st = et - 10; //30 seconds prior in PHP
console.log(chart);
if (chart.series.length > 0) {
var series = chart.series[0];
var length = series.length + 1;
var shift = series.data.length > 20;
}
$.getJSON("https://path/to/json&callback=?", function(result) {
var data = result.data;if (data.length == 0) {
return;
} else {
additions = new Array();
for (i=0;i<data.length;i++) {
if (data[i].qstype != "1") {
species = data[i].answers[0]['answer'];
scode = species.substring(0,species.search(" - ")).trim()
count = (data[i].answers[1]['answer'] * 1);
newdata = new Object();
newdata['name'] = species;
newdata['count'] = count;
additions.push(newdata);
}
}
//now, for each addition, you need to loop through the existing data structures, and see if the thing exists. if it does, add the data; if not, add the thing, then add the data.
var existingdata = chart.series;
for (i=0;i<additions.length;i++) {
isnewpoint = true;
for (j=0;j<existingdata.length;j++) {
if (existingdata[j].name == additions[i].name) {
isnewpoint = false
count = additions[i].count;
point = [now.getTime(),count];
chart.series[j].addPoint(point, true, shift);
shift = false; //this way, only one shift occurs - the first time through adding a new point to an existing data set. this will control against future shifting, either from other datapoints having new points added,
}
}
if (isnewpoint) {
newseries = new Object();
count = additions[i].count;
newseries['name'] = additions[i].name;
for (j=0;j<length;j++) {
newseries['data'].push(0);
}
newseries['data'].push(count);
chart.series.push(newseries);
}
}
//we have now looped through and added a new data point to all species where new data was created in this pull. We still need to add a new point to those that were not affected.
existingdata = chart.series;
for (i=0;i<existingdata.length;i++) {
getname = existingdata[i].name;
getlength = existingdata[i].data.length;
if (getlength<length) { //which we established earlier as one MORE than existed previously, prior to the addition
point = [now.getTime(),0]
chart.series[i].addPoint(point, true, shift);
}
}
}
setTimeout(getBirds,10000);
});
}
});
</script>
</html>
The problem that I'm having is pretty straightforward (but driving me nuts!), and early on in the js block. 我遇到的问题非常简单（但让我疯了！），并且在js区块的早期。 Though I'm defining the variable 'chart' as the new Highcharts chart, and I'm setting 'getBirds' as the function to load once that's loaded, the console.log line tells me that the chart is undefined, and the line below it throws an error ( Uncaught TypeError: Cannot read property 'series' of undefined ). 虽然我将变量'chart'定义为新的Highcharts图表，并且我将'getBirds'设置为加载后加载的函数，但console.log行告诉我图表未定义，并且下面的行它抛出一个错误（ Uncaught TypeError: Cannot read property 'series' of undefined ）。
I've checked the following: 我检查过以下内容：
- The Highcharts reference ( http://www.highcharts.com/docs/working-with-data/preprocessing-live-data ), which suggests a setup similar to mine; Highcharts参考（ http://www.highcharts.com/docs/working-with-data/preprocessing-live-data ），它建议类似于我的设置;
- I've tried defining the
chartvariable on its own line (which of course defines chart for my console.log, but does not define thechart.seriesrequired on the next line);我已经尝试在自己的行上定义chart变量（当然为我的console.log定义了图表，但没有定义下一行所需的chart.series）; - I've researched stackoverflow and other docs for variable scope, but I think I'm handling it properly based on my research. 我已经研究了stackoverflow和其他可变范围的文档，但我认为我正在根据我的研究正确处理它。
- I've tried reversing the order - putting the
getBirds()function above thechartdefinition.我试过反转顺序 - 将getBirds()函数放在chart定义之上。
I'm at a loss. 我不知所措。 Any help provided is much appreciated; 提供任何帮助非常感谢; thanks in advance! 提前致谢！
4 个解决方案
解决方案1
2 已采纳 2013-11-26 23:23:15
The reason is likely that you cannot refer to a variable during its stages of declaration. 原因很可能是您在声明阶段不能引用变量。 I'm guessing that the load function is being called as it's being declared. 我猜测正在声明加载函数被调用。 Luckily, you can refer to the object during the function declaration. 幸运的是，您可以在函数声明期间引用该对象。 Try the following block of code. 请尝试以下代码块。
function getBirds(e) {
var now = new Date(),
et = now.getTime() / 1000, //PHP TS
st = et - 10, //30 seconds prior in PHP
chart = this;
if (chart.series.length > 0) {
...declaring the chart variable in the var block inside. ...在var块里面声明chart变量。
解决方案2
1 2013-11-24 01:35:40
Trying out examples from highchart page I found out that variable chart is available only after $.json() or $ajax() call. 从高亮度页面尝试示例我发现变量chart只有在$.json()或$ajax()调用之后才可用。 If you try to use chart before that it returns undefined . 如果您在此之前尝试使用chart ，则返回undefined 。 Because it is and it is set only after $.json(). 因为它是，它只在$ .json（）之后设置。
Their examples with json or ajax are set this way: 他们使用json或ajax的示例是这样设置的：
var chart;
function requestData() {...}
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'chart_container',
defaultSeriesType: 'spline',
events: {
load: requestData
}
...
});
I did similarly with your example. 我和你的例子做了类似的事情。 From getBirds() I commented out some lines before json call: 从getBirds()我在json调用之前注释掉了一些行：
console.log(chart);
if (chart.series.length > 0) {
var series = chart.series[0];
var length = series.length + 1;
var shift = series.data.length > 20;
}
and moved them after json call. 并在json召唤之后移动它们。
And changed this line: 并改变了这一行：
//newdata['name'] = species;
newdata['name'] = scode;
And stop here: 并停在这里：
for (j=0;j<length;j++) {
because of error: 因为错误：
Uncaught TypeError: Cannot call method 'push' of undefined
at line 在线
newseries['data'].push(count);
It fails because there is no array. 它失败，因为没有数组。 Hope this help. 希望这有帮助。
解决方案3
-1 2013-11-23 18:32:38
the function declaration is interpreted before the chart object exists in the global namespace. 在全局命名空间中存在图表对象之前解释函数声明 。
If you change the syntax to a function expression instead 如果您将语法更改为函数表达式
var getBirds=function() {
....
};
it won't be evaluated until you call it. 在你打电话之前不会对它进行评估。
However, you might want to add chart as a parameter for getBirds(), it's a little cheaper than getting a variable from the global namespace. 但是，您可能希望将图表添加为getBirds（）的参数，它比从全局命名空间获取变量要便宜一些。
EDIT 编辑
This might require a bit of debugging, but it's worth a try 这可能需要一些调试，但值得一试
var getBirds = function(chart) {
...
};
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'chart_container',
defaultSeriesType: 'line',
events: {
load: function() {
getBirds(this);
}
}
}
...
});
setTimeout(getBirds,10000);
});
}
});
解决方案4
-1 2013-11-23 18:55:42
You should check two solution : 你应该检查两个解决方案：
series variable property Shouldn't be empty array maybe its ok to enter series: null;
系列变量属性不应该是空数组也许可以输入系列：null; replace your script with this code and check it again :
用这段代码替换你的脚本并再次检查：
http://notepad.cc/share/3TwgCoEano http://notepad.cc/share/3TwgCoEano
<script type="text/javascript">
$(function() {
$(document).ready(function() {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'chart_container',
defaultSeriesType: 'line',
events: {
load: getBirds
}
},
title: {
text: 'DRHW Live Data Stream'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150,
maxZoom: 20 * 1000
},
yAxis: {
title: {
text: 'Count Observed'
}
},
series: null,
legend: {
layout: 'horiztonal',
align: 'center'
}
});
function getBirds() {
var now = new Date();
var et = now.getTime() / 1000; //PHP TS
var st = et - 10; //30 seconds prior in PHP
console.log(chart);
if (chart.series.length > 0) {
var series = chart.series[0];
var length = series.length + 1;
var shift = series.data.length > 20;
}
$.getJSON("https://path/to/json&callback=?", function(result) {
var data = result.data;if (data.length == 0) {
return;
} else {
additions = new Array();
for (i=0;i<data.length;i++) {
if (data[i].qstype != "1") {
species = data[i].answers[0]['answer'];
scode = species.substring(0,species.search(" - ")).trim()
count = (data[i].answers[1]['answer'] * 1);
newdata = new Object();
newdata['name'] = species;
newdata['count'] = count;
additions.push(newdata);
}
}
//now, for each addition, you need to loop through the existing data structures, and see if the thing exists. if it does, add the data; if not, add the thing, then add the data.
var existingdata = chart.series;
for (i=0;i<additions.length;i++) {
isnewpoint = true;
for (j=0;j<existingdata.length;j++) {
if (existingdata[j].name == additions[i].name) {
isnewpoint = false
count = additions[i].count;
point = [now.getTime(),count];
chart.series[j].addPoint(point, true, shift);
shift = false; //this way, only one shift occurs - the first time through adding a new point to an existing data set. this will control against future shifting, either from other datapoints having new points added,
}
}
if (isnewpoint) {
newseries = new Object();
count = additions[i].count;
newseries['name'] = additions[i].name;
for (j=0;j<length;j++) {
newseries['data'].push(0);
}
newseries['data'].push(count);
chart.series.push(newseries);
}
}
//we have now looped through and added a new data point to all species where new data was created in this pull. We still need to add a new point to those that were not affected.
existingdata = chart.series;
for (i=0;i<existingdata.length;i++) {
getname = existingdata[i].name;
getlength = existingdata[i].data.length;
if (getlength<length) { //which we established earlier as one MORE than existed previously, prior to the addition
point = [now.getTime(),0]
chart.series[i].addPoint(point, true, shift);
}
}
}
setTimeout(getBirds,10000);
});
}
});
});
</script>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.