Question

我希望能够更新Google可视化的折线图。我的代码受到this Stack Overflow post的启发。

以下是我的问题代码：

当您点击标题为“点击”的按钮时，您会看到图表突然消失。

更新当我注释掉这一行时，它似乎正在起作用：

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

它似乎不适用于折线图。知道为什么它不适用于折线图吗？

Answer 1

在代码中使用jQuery选择器似乎存在一些问题;你在调用$(element)和$(element)[0]等部分时有点混乱。一般来说，我在这里避免使用jQuery，刷新通过替换以下两个来实现：

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

这里有一些一般性建议：

在重新渲染图表之前，您不需要清除div（即：无需调用this.element.html('')，简单地传入新数据表并重新调用.draw(newDataTable, opts)就可以了虽然可能超出了这篇文章的需要，但新的gviz animation functionality就是一个很好的例子（你只需要用更新的数据调用redraw，图表就可以设置更改动画）。

显然我并不知道你的实现完全需要，但我觉得你的代码可能比你需要的更多。根据您从服务器发送数据的方式，您可以非常轻松地重新加载图表。我已经提供了一些详细信息in this question，但简而言之，它看起来像这样：

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>

希望有所帮助。

Google线图可视化图表在更新时会消失吗？

1 个答案: