Диаграмма визуализации линейной диаграммы Google исчезает при обновлении? - PullRequest
Новая
       8

Диаграмма визуализации линейной диаграммы Google исчезает при обновлении?

2 голосов
/ 02 января 2012

Я хочу иметь возможность обновлять линейную диаграмму визуализаций Google. Мой код был вдохновлен этим сообщением переполнения стека .

Вот мой код:

http://jsfiddle.net/YCqyG/5/

Вы увидите, что при нажатии кнопки с названием «щелчок» график внезапно исчезает.

UPDATE: Когда я закомментирую эту строку, она работает: 

// this.element.html('');

И это не похоже на работу для линейного графика. Есть идеи, почему это не сработает для линейного графика?

1 Ответ

1 голос
/ 03 января 2012

Кажется, есть несколько проблем, связанных с использованием селекторов jQuery в вашем коде;это несколько сбивает с толку в тех разделах, где вы вызываете $(element), $(element)[0] и т. д. В целом, я бы здесь не использовал jQuery, обновление работает, заменяя оба:

  • add('LineChart', '#mileage') наadd('LineChart', 'mileage')
  • $(element)[0] с document.getElementById(element)

Несколько общих советов здесь:

  • Вам не нужно очищать div раньшеповторная визуализация диаграммы (т. е. нет необходимости вызывать this.element.html(''), достаточно просто передать новую таблицу данных и повторно вызвать .draw(newDataTable, opts). Хотя это потенциально выходит за рамки потребностей этого поста, новая функция анимации gviz является хорошим примером этого (вы просто вызываете перерисовку с обновленными данными, и график анимирует изменение).

  • Очевидно, я не осознаю полной необходимости вашей реализации, но яЯ чувствую, что ваш код может быть немного более сложным, чем вам нужно. В зависимости от того, как вы можете получать данные, отправленные с вашего сервера, вы можете довольно легко перезагрузить диаграмму. Я дал некоторые детали в этом вопросе , новкратце это выглядит так: 

    function drawMyChart(dataTable) {
    // convert your dataTable to the right format
    // options here include loading from arrays, json representations of your datatable
    // or something more manual perhaps
    var opts = {height:50, width:50};
    var chart = new google.visualization.LineChart(document.getElementById('vis'));
    chart.draw(dataTable, opts);
}

function makeAjaxCall() {
    $.ajax({
        url: '/path/to/data/json',
        sucess: drawMyChart(a),
        dataType: 'json' // this is important, have it interpreted as json
    });
}
// html somewhere
<div id='vis'></div>
<input type='button' onclick='makeAjaxCall()'>Go</input>

Надеюсь, это поможет.

...