Uncaught TypeError: Невозможно прочитать свойство ‘xAxis’ из неопределенных Highcharts
я пытаюсь сделать синхронизировать масштабирование из более чем 2 графиков, как в этом примере http://jsfiddle.net/ZArZM/
Проблема в том, что диаграмма отображается, но в консоли есть «Uncaught TypeError: Невозможно прочитать свойство ‘xAxis’ undefined», и синхронизация также не работает.
Это мой код
<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>
Любой совет, ребята? Я думаю, что застрял. Спасибо за Ваше внимание.
Решение
Это происходит потому, что у вас есть 2 графика, настроенные внутри вызова ajax ($.getJSON). Поэтому 2 графика не знают друг о друге. Вариант будет заключаться в том, чтобы обернуть обе ваши диаграммы в один метод ajax (или вложенный метод ajax). Это может иметь свои подводные камни, но тогда диаграммы будут, по крайней мере, «знать» друг о друге.
Еще один вариант — определить ваши диаграммы вне методов ajax и просто обновить диаграммы данными после успешного вызова данных.
Другие решения
Javascript не знал, что ваши переменные chart1 и chart2 глобально вызывают его удержание в функции,
у вас есть несколько вариантов:
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
}]
});
});
});