Шаблон Ajax для обновления данных диаграммы Javascript?

Question

Я использую Highchart API для отображения графиков. Существует много типов диаграмм для отображения, и идея состоит в том, чтобы позволить пользователю выбрать диаграмму из выпадающего списка, сделать запрос ajax и частично обновить диаграмму. Хорошо, что я могу вывести пользовательский ответ с пользовательскими параметрами диаграммы, макетом и данными.

Проблема здесь в том, что макет диаграммы и данные находятся внутри тега script в head. Пустой div заполняется API.

Какой шаблон я должен использовать, чтобы частично обновить график? Извините за очень нубский вопрос, но я немного запутался, когда имел дело с чем-то отличным от обновления div с простым текстом / html в качестве ответа сервера.

Answer 1

Ответьте себе: сделайте chart глобальной переменной javascript, инициализируйте параметры диаграмм (необязательно), отправьте запрос ajax и верните объект JSON, представляющий весь объект диаграммы, переопределяя chart global. Не нужно звонить redraw. Ограничения : поскольку вы не можете сериализовать функцию, вы не можете динамически переопределить функцию форматирования (например, для всплывающих подсказок).

Если вы просто хотите обновить данные, вызовите методы addSeries, setSize, setTitle (и другие).

Все очень хорошо объяснено здесь (раздел 4) и здесь .

Answer 2

Я немного работал с hightchart, и чтобы изменить тип диаграммы, я вызвал функцию, которая обращается к источнику php ajax и создает диаграмму с результатом таблицы в db.

мне кажется, что на каждом графике нужна разная схема размещения.

и поэтому я создаю отдельные файлы для этого.

как:

piechart.ajax.php

и div получает возврат вызова ajax, и после этого я вызываю Highcharts, чтобы отобразить результаты div в диаграмме.

Не знаю, поможет ли это вам, но может быть ясным ваш "разум"

редактирование:

HTML:

<div id="grafic"></div>

ЯШ:

    $.post("ajax/piechart.ajax.php", 
            { 
                cache: false,
            }, 
            function(data){ 

                $("#grafic").html(data);

                var table = document.getElementById('datatable'),
                    options = {
                        chart: {
                            renderTo: 'grafic',
                            zoomType: 'xy',
                            defaultSeriesType: 'pie'
                        }
                    };
                    Highcharts.visualize(table, options);
            }
    )