Javascript 如何定期刷新谷歌图表？

您好，我有一个用谷歌图表制作的时间线，我想做的是每隔一段时间更新一次，例如每5秒，我从json获取数据，我尝试了这种方式，但它对我不起作用：

setTimeout(function () {
            drawChart();
        }, 5000);

有什么办法吗

google.load("visualization", "1", {packages: ["timeline"]});
    google.setOnLoadCallback(drawChart);

    // google.charts.setOnLoadCallback(drawChart);
    function drawChart() {
        $(".timeline").each(function () {
            var obje = {{ devicejson|safe }};
            var elem = $(this),
                id = elem.attr('id');
            var container = document.getElementById(id);
            var chart = new google.visualization.Timeline(container);
            var dataTable = new google.visualization.DataTable();
            dataTable.addColumn({type: 'string', id: 'Role'});
            dataTable.addColumn({type: 'string', id: 'Name'});
            dataTable.addColumn({type: 'date', id: 'Start'});
            dataTable.addColumn({type: 'date', id: 'End'});
            dataTable.addColumn({type: 'string', id: 'TimeEst'});
            dataTable.addColumn({type: 'string', role: 'style'});
            for (n = 0; n < obje.length; ++n) {
                if (obje[n].device_id == id) {
                    dataTable.addRows([
                        ['Department', obje[n].digitaloutput_user_description, new Date('"' + obje[n].startdatetime + '"'), new Date('"' + obje[n].enddatetime + '"'), obje[n].lighstate_user_description, obje[n].color],
                    ]);
                }
            }

            for (n = 0; n < obje.length; ++n) {
                if (obje[n].device_id == id) {
                    console.log(obje[n].color)

                }
            }

            var options = {
                chartArea: {
                    height: '90%',
                    width: '100%',
                    top: 36,
                    right: 12,
                    bottom: 2,
                    left: 12
                },
                height: 100,
                tooltip: {isHtml: true},
                timeline: {
                    showRowLabels: false,
                },
                avoidOverlappingGridLines: false,
                {#hAxis: {format: 'dd-MMM-yyyy HH:mm:ss'}#}

            };

            var formatTime = new google.visualization.DateFormat({
                pattern: 'yyyy-MM-dd HH:mm:ss a'
            });

            var view = new google.visualization.DataView(dataTable);
            view.setColumns([0, 1, {
                role: 'tooltip',
                type: 'string',
                calc: function (dt, row) {
                    // build tooltip
                    var dateBegin = dt.getValue(row, 2);
                    var dateEnd = dt.getValue(row, 3);
                    var oneHour = (60 * 1000);
                    var duration = (dateEnd.getTime() - dateBegin.getTime()) / oneHour;

                    var tooltip = '<div><div class="ggl-tooltip"><span>';
                    tooltip += dt.getValue(row, 0) + ':</span>&nbsp;' + dt.getValue(row, 1) + '</div>';
                    tooltip += '<div class="ggl-tooltip"><div>' + formatTime.formatValue(dateBegin) + ' - ';
                    tooltip += formatTime.formatValue(dateEnd) + '</div>';
                    tooltip += '<div><span>Duration: </span>' + duration.toFixed(0) + ' minutes</div>';
                    tooltip += '<div><span>Estate: </span>' + dt.getValue(row, 5) + '</div></div>';

                    return tooltip;
                },
                p: {html: true}
            }, 2, 3]);

            google.visualization.events.addListener(chart, 'ready', function () {
                var labels = container.getElementsByTagName('text');
                Array.prototype.forEach.call(labels, function (label) {
                    label.setAttribute('font-weight', 'normal');
                });
            });

            chart.draw(view.toDataTable(), options);


        })
        setTimeout(function () {
            drawChart();
        }, 5000);
    }

google.load（“可视化”，“1”，“{packages:[“timeline”]}）；
setOnLoadCallback（drawChart）；
//google.charts.setOnLoadCallback（drawChart）；
函数绘图图（）{
$（“.timeline”）。每个（函数（）{
var obje={devicejson | safe}}；
var elem=$（此），
id=元素属性（“id”）；
var container=document.getElementById（id）；
var chart=newgoogle.visualization.Timeline（容器）；
var dataTable=new google.visualization.dataTable（）；
addColumn（{type:'string'，id:'Role'}）；
addColumn（{type:'string'，id:'Name'}）；
addColumn（{type:'date'，id:'Start'}）；
addColumn（{type:'date'，id:'End'}）；
addColumn（{type:'string'，id:'TimeEst'}）；
addColumn（{type:'string'，role:'style'}）；
对于（n=0；n

对于初学者来说，旧版本的谷歌图表不应该再使用了

替换旧库

<script src="https://www.google.com/jsapi"></script>

<script src="https://www.gstatic.com/charts/loader.js"></script>

JavaScript在客户端上运行
因此，无论调用多少次

drawChart

，
它将始终使用在第一次页面加载时从服务器接收的相同数据

相反，试试这个

创建两个页面，一个用于返回数据，另一个用于绘制图表。
然后，您可以使用AJAX获取数据并根据需要多次绘制图表

创建一个新页面，新页面中真正需要的就是以下代码行

{{ devicejson|safe }}

除了任何标题信息和用于将数据获取到当前页面的现有代码之外。
但您不希望将其分配给新页面中的变量。
只需使用上述语句将数据写入页面

然后可以使用AJAX获取数据并绘制图表

function getData() {
    $.ajax({
      url: 'get_data.url',   // <-- use url to new page here
      dataType: 'JSON'
    }).done(function (data) {
      drawChart(data);
    });
}

---

首先，谷歌图表的旧版本不应该再被使用

替换旧库

<script src="https://www.google.com/jsapi"></script>

<script src="https://www.gstatic.com/charts/loader.js"></script>

JavaScript在客户端上运行
因此，无论调用多少次

drawChart

，
它将始终使用在第一次页面加载时从服务器接收的相同数据

相反，试试这个

创建两个页面，一个用于返回数据，另一个用于绘制图表。
然后，您可以使用AJAX获取数据并根据需要多次绘制图表

创建一个新页面，新页面中真正需要的就是以下代码行

{{ devicejson|safe }}

除了任何标题信息和用于将数据获取到当前页面的现有代码之外。
但您不希望将其分配给新页面中的变量。
只需使用上述语句将数据写入页面

然后可以使用AJAX获取数据并绘制图表

function getData() {
    $.ajax({
      url: 'get_data.url',   // <-- use url to new page here
      dataType: 'JSON'
    }).done(function (data) {
      drawChart(data);
    });
}

---

您可以轮询或实际使其实时：您可以轮询或实际使其实时：