Ajax Google Visualization API Gauge with jquery答案

【问题标题】：Ajax Google Visualization API Gauge with jqueryAjax Google Visualization API Gauge with jquery
【发布时间】：2023-03-06 14:10:01
【问题描述】：

我希望创建一个通过 ajax 更新的仪表板仪表。下面是我的代码。我有 ajax 代码，但不确定如何更新仪表。有什么建议吗？

         google.load('visualization', '1', {packages:['gauge']});
          google.setOnLoadCallback(drawChart);
          function drawChart() {
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Label');
            data.addColumn('number', 'Value');
            data.addRows(1);
            data.setValue(0, 0, 'Tempature');
            data.setValue(0, 1, 76);

            var chart = new google.visualization.Gauge(document.getElementById('liveTempChart'));
            var options = {width: 340, height: 130, redFrom: 90, redTo: 100,
                yellowFrom:75, yellowTo: 90, minorTicks: 5};
            chart.draw(data, options);
          }

ajax 代码...

foreach($obj->sensor as $unit) { if ($unit->label=="Temp") { echo $unit->tempf." F"; } }

【问题讨论】：

你的 ajax 在哪里？

标签： javascript jquery ajax visualization

【解决方案1】：

您也可以使用相同类型的代码进行更新。您需要创建一个新的数据表实例，并再次调用图表的绘制函数（与您第一次更新的方式非常相似）。

        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Label');
        data.addColumn('number', 'Value');
        data.addRows(1);
        data.setValue(0, 0, 'Tempature');
        data.setValue(0, 1, 76);

        chart.draw(data, options);

【讨论】：