谷歌线图可视化图表消失时更新它

Google linechart visualization chart disappears when updating it?

本文关键字：更新 消失 可视化 谷歌      更新时间：2023-09-26

我希望能够更新谷歌可视化的折线图。我的代码是受到Stack Overflow这篇文章的启发。

下面是我的问题代码:

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

你会看到，当你点击标题为"click"的按钮时，图表突然消失了。

更新:当我注释掉这一行时，它似乎可以工作:

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

对于折线图，它似乎不起作用。知道为什么折线图不行吗?

在你的代码中使用jQuery选择器似乎有一些问题;在调用$(element)和$(element)[0]等的部分会有些混乱。一般情况下，这里我不会使用jQuery，刷新的工作原理是替换以下两个:

  • add('LineChart', '#mileage')与add('LineChart', 'mileage')
  • $(element)[0] with document.getElementById(element)

这里有一些一般性的建议:

  • 你不需要在重新渲染图表之前清除div(即:不需要调用this.element.html('')，简单地传入一个新的数据表并重新调用.draw(newDataTable, opts)就可以了)。虽然可能超出了这篇文章的需要，新的gviz动画功能是一个很好的例子(你只需要调用更新数据的redraw，图形动画的变化)。

  • 显然我不知道你的实现的全部需要，但我觉得你的代码可能比你需要的稍微复杂一些。根据从服务器获取数据的方式，可以很容易地重新加载图表。关于这个问题，我已经给出了一些细节，但简单地说，它是这样的:

    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>

希望对你有帮助。

相关文章：