Сделать динамически сгенерированные Google чарты отзывчивыми - PullRequest
Новая
       6

Сделать динамически сгенерированные Google чарты отзывчивыми

0 голосов
/ 15 сентября 2018

Я следовал примерам, чтобы сделать Google Charts отзывчивыми, используя следующий код: 

$(document).ready( function () {
    //Make Chart(s) Responsive
    $(window).resize(function(){
        drawVisualization();
    });

Это прекрасно работает в моих html-прототипах, однако сейчас я генерирую свои графики с использованием PHP. В качестве примера мне может потребоваться сгенерировать n диаграмм, поэтому я перебираю набор данных в PHP, генерируя DIV, в котором будет находиться диаграмма, данные JSON и т. Д.

Мои DIV генерируются уникальными, например: 

<div id="visualization_**identifier**" style="height:200px;">

Затем я создаю функцию для каждого графика, чтобы позаботиться о рендеринге. Я могу при необходимости назвать ее уникально: 

function drawVisualization_**identifier**()

Это все работает, однако код jQuery требует, чтобы я вызывал каждый drawVisualization_**identifier**() по очереди, чтобы обновить графики, есть ли способ, которым я могу динамически создавать список и обновлять их?

Я предполагаю, что могу добавить класс к своим элементам визуализации и запросить их с помощью типичного кода jQuery (хотя я не совсем уверен, как) - если это можно сделать, могу ли я манипулировать им в вызовах к каждому drawVisualization_**identifier**() функция для обновления?

Что-то (очень грубо!) В духе: 

$(document).ready( function () {
    //Make Chart(s) Responsive
    $(window).resize(function(){
        foreach(get visualization div names){
            refreshVizualization('vizualization'+vizDivName);
        }
    });

Любая помощь будет принята с благодарностью, хотя я чувствую, что добираюсь туда с помощью jQuery и графиков, из-за которых у меня болит голова. Кажется странным, что, как бы ни были хороши Google Charts, нет возможности «перерисовать при изменении размера».

1 Ответ

0 голосов
/ 15 сентября 2018

Кажется, у меня есть склонность к яркой идее сразу после того, как я сдался и опубликовал свой вопрос. Я понял, что во время генерации моих PHP-диаграмм я также мог создать (в PHP) функцию javaScript для обновления, а затем вызывать эту функцию из jQuery resize. PHP ниже следует за циклом, который создает мои функции charts / divs / callback и, кажется, прекрасно работает. 

#Generate Chart Refresh Function to call on Window Resize
print('<script>');
print('function drawVisualization() {');
foreach($entity as $chartid){
    print('   drawVisualization_'.$chartid["uniqueIDperChart"].'();');
}
print('};');
print('</script>');

Итак, если у меня есть четыре графика, у функции будет четыре drawVizualization_uniqueID (); вызывает, тогда функция drawVisualization () вызывается из события jQuery, связанного с изменением размера окна.

...