我尝试从超过2个图表进行同步缩放，就像在这个例子中http://jsfiddle.net/ZArZM/
问题是图表显示但是在控制台中有“未捕获的TypeError：无法读取未定义的属性'xAxis'，并且同步也不起作用。
这是我的代码。
<script type="text/javascript">
$(function () {
var chart1;
var chart2;
$.getJSON('http://sine.co.id/PHESIAK/laporan/getJSON.php', function (data) {
Highcharts.setOptions({
global: {
useUTC: false
}
});
$(document).ready(function () {
chart1 = new Highcharts.StockChart({
chart: {
renderTo: 'container',
},
title: {
text: 'Data Monitoring Uji Coba Fast',
style: {
color: 'black',
fontWeight: 'bold',
fontSize: '50px'
}
},
subtitle: {
text: 'Temperature Sensor Well Head 81',
style: {
color: '#3366AA',
fontSize: '30px'
}
},
xAxis: {
gapGridLineWidth: 0,
events: {
afterSetExtremes: function (event) {
var xMin = event.min;
var xMax = event.max;
var ex = chart2.xAxis[0].getExtremes();
if (ex.min != xMin || ex.max != xMax) chart2.xAxis[0].setExtremes(xMin, xMax, true, false);
}
}
},
rangeSelector: {
buttons: [{
type: 'hour',
count: 1,
text: '1h'
}, {
type: 'day',
count: 1,
text: '1D'
}, {
type: 'all',
count: 1,
text: 'All'
}],
selected: 1,
inputEnabled: false
},
series: [{
name: 'Fahrenheit',
type: 'area',
data: data,
gapSize: 5,
tooltip: {
valueDecimals: 2
},
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, '#003399'],
[1, '#3366AA']
]
},
threshold: null
}]
});
});
});
});
</script>
<script type="text/javascript">
$.getJSON('http://sine.co.id/PHESIAK/laporan/getJsonPres.php', function (data1) {
Highcharts.setOptions({
global: {
useUTC: false
}
});
$(document).ready(function () {
chart2 = new Highcharts.StockChart({
chart: {
renderTo: 'container1',
},
title: {
text: ''
},
subtitle: {
text: 'Pressure Sensor Well Head 81',
style: {
color: '#D43346',
fontSize: '30px'
}
},
xAxis: {
gapGridLineWidth: 0,
events: {
afterSetExtremes: function (event) {
var xMin = event.min;
var xMax = event.max;
var ex = chart1.xAxis[0].getExtremes();
if (ex.min != xMin || ex.max != xMax) chart1.xAxis[0].setExtremes(xMin, xMax, true, false);
}
}
},
rangeSelector: {
buttons: [{
type: 'hour',
count: 1,
text: '1h'
}, {
type: 'day',
count: 1,
text: '1D'
}, {
type: 'all',
count: 1,
text: 'All'
}],
selected: 1,
inputEnabled: false
},
series: [{
name: 'PSI',
type: 'area',
data: data1,
gapSize: 5,
tooltip: {
valueDecimals: 2
},
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, '#ad1a2c'],
[1, '#D43346']
]
},
threshold: null
}]
});
});
});
</script>
任何建议的人？我想我被卡住了。感谢您的关注。
发生这种情况是因为您在ajax调用（$.getJSON）中设置了2个图表。因此，2个图表彼此不了解。选项是将两个图表包装在单个ajax方法（或嵌套的ajax方法）中。这可能有其自身的陷阱，但随后图表至少会“了解”彼此。
另一种选择是在ajax方法之外定义图表，并在成功调用数据时用数据更新图表。
Javascript不知道你的chart1和图表2变量全局导致它在函数中保留，你有一些选择：
1:
var chart1 = $('#container').highcharts();
var chart2 = $('#container1').highcharts();
或使用
2:
$('#container').highcharts().xAxis[0].setExtremes
$('#container1').highcharts().xAxis[0].setExtremes
顺便说一下你在记事本中用手工编辑的highstock而不是highcharts，试试也许工作^^
$(document).ready(function() {
var chart1;
var chart2;
$.getJSON('http://sine.co.id/PHESIAK/laporan/getJSON.php?callback=?', function(data) {
chart1 = new Highcharts.StockChart({
chart: {
renderTo: 'container1',
},
title: {
text: 'Data Monitoring Uji Coba Fast',
style: {
color: 'black',
fontWeight: 'bold',
fontSize: '50px'
}
},
subtitle: {
text: 'Temperature Sensor Well Head 81',
style: {
color: '#3366AA',
fontSize: '30px'
}
},
xAxis: {
gapGridLineWidth: 0,
events: {
afterSetExtremes: function(event) {
var xMin = event.min;
var xMax = event.max;
var ex = chart2.xAxis[0].getExtremes();
if (ex.min != xMin || ex.max != xMax) chart2.xAxis[0].setExtremes(xMin, xMax, true, false);
}
}
},
rangeSelector: {
buttons: [{
type: 'hour',
count: 1,
text: '1h'
}, {
type: 'day',
count: 1,
text: '1D'
}, {
type: 'all',
count: 1,
text: 'All'
}],
selected: 1,
inputEnabled: false
},
series: [{
name: 'Fahrenheit',
type: 'area',
data: data,
gapSize: 5,
tooltip: {
valueDecimals: 2
},
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, '#003399'],
[1, '#3366AA']
]
},
threshold: null
}]
});
});
$.getJSON('http://sine.co.id/PHESIAK/laporan/getJsonPres.php?callback=?', function(data1) {
chart2 = new Highcharts.StockChart({
chart: {
renderTo: 'container2',
},
title: {
text: ''
},
subtitle: {
text: 'Pressure Sensor Well Head 81',
style: {
color: '#D43346',
fontSize: '30px'
}
},
xAxis: {
gapGridLineWidth: 0,
events: {
afterSetExtremes: function(event) {
var xMin = event.min;
var xMax = event.max;
var ex = chart1.xAxis[0].getExtremes();
if (ex.min != xMin || ex.max != xMax) chart1.xAxis[0].setExtremes(xMin, xMax, true, false);
}
}
},
rangeSelector: {
buttons: [{
type: 'hour',
count: 1,
text: '1h'
}, {
type: 'day',
count: 1,
text: '1D'
}, {
type: 'all',
count: 1,
text: 'All'
}],
selected: 1,
inputEnabled: false
},
series: [{
name: 'PSI',
type: 'area',
data: data1,
gapSize: 5,
tooltip: {
valueDecimals: 2
},
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, '#ad1a2c'],
[1, '#D43346']
]
},
threshold: null
}]
});
});
});