Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 22.04.2014, 11:09
Интересующийся
Отправить личное сообщение для Volchen0ck Посмотреть профиль Найти все сообщения от Volchen0ck
 
Регистрация: 27.01.2013
Сообщений: 24

Динамическое изменение значений диаграммы в зависимости от значения ползунков
!!! В песочнице сохранить не могу - выдает error - 500 (Service unavailable (with message)). Поэтому пример в аттаче - sliderDiagram.zip.
Диаграма появится, если сдвинуть все ползунки поочереди (от первого к последнему), когда последний изменит свое значение - появится диаграмма.



Использую http://www.highcharts.com/demo/pie-legend за основу для диаграммы.

В примере - данные для диаграммы - статичны, в моем случае, значения нужно подтянуть из ползунков.

Не использую clip/jquery ui и т.д. для ползунка, т.к. функционал будет работать на IE11 на touch девайсе, из рабочих вариантов остался только input type="range". Он корректно работает на девайсе (и с мышью и с "пальцем"). (Note: Lenovo ThinkPad Helix i7 + IE 11 ).

Для слайдеров, использую такую конструкцию:
<input type="range" id="slider" min="1" max="5" onchange="this.id=this.value" value="1">


Скрипт:
$('#slider2').change(function () {
                 var b = this.value;
                 z2 = b * p;
                 console.log('z2=', z2);


Чтобы работало - функция change для кадлого последующего слайдера, вставлена в предыдущую. ну и соответственно, диаграмма обновляется, когда сдвигаем последний слайдер.

Нужно, чтобы диаграмма обновлялась при изменении значения каждого отдельно взятого слайдера.
Дайте, пожалуйста, пинка в правильном направлении.
Вложения:
Тип файла: zip sliderDiagram.zip (90.3 Кб, 6 просмотров)
Ответить с цитированием
  #2 (permalink)  
Старый 22.04.2014, 11:38
Профессор
Отправить личное сообщение для jsnb Посмотреть профиль Найти все сообщения от jsnb
 
Регистрация: 15.03.2014
Сообщений: 561

Так а зачем они вложены то в друг друга? Чтобы undefined что ли в диаграмму не попадало? Ну так что мешает задать значения по умолчанию и при каждом изменении слайдера обновлять данные? Там вроде в API методы для обновления данных есть.
Ответить с цитированием
  #3 (permalink)  
Старый 22.04.2014, 11:44
Интересующийся
Отправить личное сообщение для Volchen0ck Посмотреть профиль Найти все сообщения от Volchen0ck
 
Регистрация: 27.01.2013
Сообщений: 24

да, чтобы undefined в диаграмму не попадало. в диаграмме используются z1 - z5, которые изменяются, в зависимости, от изменения значения слайдера. Туплю на моменте, как передать значения по отдельности и обновлять данные, чтобы при этом не было undefined.
Ответить с цитированием
  #4 (permalink)  
Старый 22.04.2014, 11:51
Профессор
Отправить личное сообщение для jsnb Посмотреть профиль Найти все сообщения от jsnb
 
Регистрация: 15.03.2014
Сообщений: 561

Сообщение от Volchen0ck Посмотреть сообщение
да, чтобы undefined в диаграмму не попадало. в диаграмме используются z1 - z5, которые изменяются, в зависимости, от изменения значения слайдера. Туплю на моменте, как передать значения по отдельности и обновлять данные, чтобы при этом не было undefined.
Ну у тебя же когда ползунки стоят в левом положении диаграмма как-то пересчитывается. Вот и задай эти значения для переменных при объявлении. При загрузке же страницы ползунки будут в левом положении, значит value у них будет 1, значит все твои z1-z5 будут равны p. Ну так и напиши var z1 = p, z2 = p и т.д. Если по умолчанию ползунки не в левом положении то смотри чему равно их value и умножаешь. Ну а при каждом change ползунков перестраивашь диаграму с изменившимися данными. Там в API есть setData: http://api.highcharts.com/highcharts#Series.setData
Вроде то что надо.

Последний раз редактировалось jsnb, 22.04.2014 в 11:56.
Ответить с цитированием
  #5 (permalink)  
Старый 22.04.2014, 15:04
Интересующийся
Отправить личное сообщение для Volchen0ck Посмотреть профиль Найти все сообщения от Volchen0ck
 
Регистрация: 27.01.2013
Сообщений: 24

глобально присваиваю z1=p, z2= p и т.д. - диаграмма делится на 6 равных частей. Согласно докам, после добавления/изменения вызываю chart.redraw().

$('#slider1').change(function () {
var a = this.value; z1 = a * p;
// $('#container').highcharts().redraw();
chart.redraw()
});
значения не видит, в консоли error - undefined or null reference.

Если можно, "ткните носом".
Ответить с цитированием
  #6 (permalink)  
Старый 22.04.2014, 15:21
Профессор
Отправить личное сообщение для jsnb Посмотреть профиль Найти все сообщения от jsnb
 
Регистрация: 15.03.2014
Сообщений: 561

Так redraw и так там по умолчанию автоматически делается после изменения данных. От того что переменный поменялись данные автоматически в диаграму не попадут. Я же дал ссылку на метод, который обновляет данные. Вызываете его, передаете новый data массив с новыми значениями переменных и оно само вам красиво всё перерисует. Там же даже по ссылке демка есть как оно работает.
Кстати, вот это вот в слайдерах зачем:
onchange="this.id=this.value"

?
Просто если это убрать, то можно вообще 1 обработчик повесить на все эти слайдеры который будет по id определять какую z ему надо обновить.
Ответить с цитированием
  #7 (permalink)  
Старый 22.04.2014, 15:40
Интересующийся
Отправить личное сообщение для Volchen0ck Посмотреть профиль Найти все сообщения от Volchen0ck
 
Регистрация: 27.01.2013
Сообщений: 24

тяжело быть бестолковым! сорри.
$('.slider').click(function() {
                var chart = $('#container').highcharts();
                chart.series[0].setData([z1, z2, z3, z4, z5, z6]);
       });
,

жаль только не обновляются так красиво, как в первый раз, когда страница загружается.

Спасибо большое за помощь!
Ответить с цитированием
  #8 (permalink)  
Старый 22.04.2014, 16:15
Профессор
Отправить личное сообщение для jsnb Посмотреть профиль Найти все сообщения от jsnb
 
Регистрация: 15.03.2014
Сообщений: 561

Сообщение от Volchen0ck Посмотреть сообщение
[JS]chart.series[0].setData([z1, z2, z3, z4, z5, z6]);
А так текстовые метки на диаграмме не теряются?

Сообщение от Volchen0ck Посмотреть сообщение
жаль только не обновляются так красиво, как в первый раз, когда страница загружается.
Так никто не мешает ее пересоздавать с новыми данными каждый раз. Только перед созданием новой надо уничтожить через destroy() старую, чтобы память освободить. Ну и это по ресурсам более затратно, особенно мобильные платформы могут быть чувствительны.

Последний раз редактировалось jsnb, 22.04.2014 в 16:46.
Ответить с цитированием
  #9 (permalink)  
Старый 23.04.2014, 12:15
Интересующийся
Отправить личное сообщение для Volchen0ck Посмотреть профиль Найти все сообщения от Volchen0ck
 
Регистрация: 27.01.2013
Сообщений: 24

Текстовые метки можно вернуть вот так
series: [{
                    name: 'form',
                    data: [['Value1', z1],
                             ['Value2',z2], 
                             ['Value3',z3], 
                             ['Value4',z4],
                             ['Value5', z5],
                             ['Value6', z6]]
                }]


Не могу найти, можно ли использовать картинки, в качестве меток, а не текст. Скорее всего нельзя.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Динамическое изменение ширины в зависимости от содержимого iNfantry Events/DOM/Window 38 24.07.2017 19:38
изменение значения input при смене значения select galart jQuery 4 30.01.2015 18:39
Разные значения в зависимости от опций Batyabest Events/DOM/Window 28 26.11.2013 17:40
изменение картинок в зависимости от значения input jump91 Общие вопросы Javascript 2 30.01.2012 07:57
Динамическое изменение <input text> baal1988 Events/DOM/Window 4 24.08.2008 16:17