Показать сообщение отдельно
  #1 (permalink)  
Старый 15.02.2016, 12:34
Новичок на форуме
Отправить личное сообщение для elcarnado Посмотреть профиль Найти все сообщения от elcarnado
 
Регистрация: 15.02.2016
Сообщений: 1

Сделать доступным объект из другой функции
Здравствуйте!
Задача тривиальна: необходимо построить график по полученным с сервера данным и менять цвет пера графика в зависимости от выбранного в <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
                });
Ответить с цитированием