Здравствуйте!
Задача тривиальна: необходимо построить график по полученным с сервера данным и менять цвет пера графика в зависимости от выбранного в <input type='color' class='color'>. По отдельности все это реализовано и работает:
1. Функция чтения данных с сервера и отрисовки графика:
var get_series = function(from, to){
var url = $('#trend_url').attr('href').replace('edit', 'data');
var series_data = {};
$.ajax({
url: url,
type: 'GET',
dataType: "json",
data: {'from': from, 'to': to},
success: function(reply) {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
zoomType: 'xy'
},
title: {
text: 'Sensor Data',
x: -20 //center
},
subtitle: {
text: 'some subtitle',
x: -20
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
month: '%e. %b',
year: '%b'
}
},
yAxis: {
title: {
text: 'Temperature (°C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
series: reply
});
}
});
};
2. Функция изменения цвета графика:
$('.color').change(function(){
// var chart = how to get chart object from function get_chart()?
var color_name = $(this).attr('name');
var chart_number = parseInt(color_name.slice(5)) - 1;
chart.series[chart_number].options.color = $(this).attr('value');
chart.series[chart_number].update(chart.series[chart_number].options);
});
Задача состоит в том, чтобы функция №2 имела доступ к объекту 'chart' из функции №1.
А проблема в том, что график рисуется только при такой реализации функции get_chart - когда поле series объекта chart непосредственно равно reply. Попытки вынести создание объекта chart в область document.ready() и возвращать только полученные данные в виде объекта series_obj, а потом подставить их при создании графика ни привели к нужному результату: графика не отображается:
-Попытка переделать код:
1. Возвращаем только полученные данные в виде объекта:
var get_series = function(from, to){
var url = $('#trend_url').attr('href').replace('edit', 'data');
var series_data = {};
$.ajax({
url: url,
type: 'GET',
dataType: "json",
data: {'from': from, 'to': to},
success: function(reply) {
series_data = reply
}
});
return series_data;
};
2. Запрашиваем данные:
var series_obj = get_series(FromDateISOString, CurrentDateISOString);
3. Рисуем график:
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
zoomType: 'xy'
},
title: {
text: 'Sensor Data',
x: -20 //center
},
subtitle: {
text: 'some subtitle',
x: -20
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
month: '%e. %b',
year: '%b'
}
},
yAxis: {
title: {
text: 'Temperature (°C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
series: series_obj
});
