Я пытаюсь создать некоторые графики GAUGE с помощью графиков Google. Моя цель – загрузить данные с php-страницы и автоматически обновить. Я смог это сделать, но когда данные обновлены, калибровочные линии не анимируются, а вместо этого перерисовываются из новых. Я хотел бы видеть крутую анимацию следующим образом: https://jsfiddle.net/api/post/library/pure/ . Фактически я загружаю данные из статического файла, тогда я создам данные из базы данных MySQL (проверены и обработаны). Вот мой код:
temperature.php
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script> <script type="text/javascript"> google.charts.load('current', {'packages':['gauge']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var jsonData = $.ajax({ url: "http://URL/fetch_data3.php?type=gauge", dataType:"json", async: false }).responseText; var data = new google.visualization.DataTable(jsonData); var options = { width: 600, height: 300, redFrom: 35, redTo: 50, yellowFrom: 24, yellowTo: 35, greenFrom: 18, greenTo: 24, majorTicks : ['-10', '0', '10','20','30','40','50'], minorTicks: 10, animation:{ duration: 1000, easing: 'inAndOut', }, max: 50, min: -10 }; var chart = new google.visualization.Gauge(document.getElementById('chart_div')); chart.draw(data, options); clearChart(); } setInterval(function() { drawChart(); }, 5000); </script> </head> <body> <div id="chart_div" style="width: 500px; height: 400px;"></div> </body> </html> и здесь fetch_data3.php
<?php if ($_REQUEST["type"] == "gauge") { $sec = date('s'); if ($sec % 2 == 0) { $string = file_get_contents("sampleData.json"); } else { $string = file_get_contents("sampleData2.json"); } echo $string; } ?>
sampleData.json:
{ "cols": [ {"id":"","label":"Label","pattern":"","type":"string"}, {"id":"","label":"Value","pattern":"","type":"number"} ], "rows": [ {"c":[{"v":"Esterno","f":null},{"v":0,"f":null}]}, {"c":[{"v":"Soggiorno","f":null},{"v":0,"f":null}]}, {"c":[{"v":"Stanza","f":null},{"v":0,"f":null}]} ] }
sampleData2.json:
{ "cols": [ {"id":"","label":"Label","pattern":"","type":"string"}, {"id":"","label":"Value","pattern":"","type":"number"} ], "rows": [ {"c":[{"v":"Esterno","f":null},{"v":10,"f":null}]}, {"c":[{"v":"Soggiorno","f":null},{"v":40,"f":null}]}, {"c":[{"v":"Stanza","f":null},{"v":20,"f":null}]} ] }
Граф загружает случайно sampleData2.json или sampleData.json, но на графике нет аномалий.
Что не так?
Благодаря!
Саймон
в соответствии с поддерживаемыми модификациями для калибровочной диаграммы,
анимация возникает только при изменении значения в данных
так как диаграмма не оживляет при startup ,
сначала нарисуйте диаграмму со значениями, установленными на значение min ,
или значение, с которого должна начинаться анимация
затем используйте одноразовый 'ready' прослушиватель событий для рисования диаграммы с реальными данными
это приведет к оживлению графика
см. следующий рабочий фрагмент …
google.charts.load('current', { callback: function () { drawChart(); setInterval(function() { drawChart(); }, 5000); function drawChart() { var initData = { "cols": [ {"id":"","label":"Label","pattern":"","type":"string"}, {"id":"","label":"Value","pattern":"","type":"number"} ], "rows": [ {"c":[{"v":"Esterno","f":null},{"v":-10,"f":null}]}, {"c":[{"v":"Soggiorno","f":null},{"v":-10,"f":null}]}, {"c":[{"v":"Stanza","f":null},{"v":-10,"f":null}]} ] }; var data = new google.visualization.DataTable(initData); var options = { width: 600, height: 300, redFrom: 35, redTo: 50, yellowFrom: 24, yellowTo: 35, greenFrom: 18, greenTo: 24, majorTicks : ['-10', '0', '10','20','30','40','50'], minorTicks: 10, animation:{ duration: 1000, easing: 'inAndOut' }, max: 50, min: -10 }; var chart = new google.visualization.Gauge(document.getElementById('chart_div')); google.visualization.events.addOneTimeListener(chart, 'ready', function () { var jsonData = { "cols": [ {"id":"","label":"Label","pattern":"","type":"string"}, {"id":"","label":"Value","pattern":"","type":"number"} ], "rows": [ {"c":[{"v":"Esterno","f":null},{"v":10,"f":null}]}, {"c":[{"v":"Soggiorno","f":null},{"v":40,"f":null}]}, {"c":[{"v":"Stanza","f":null},{"v":20,"f":null}]} ] }; var data = new google.visualization.DataTable(jsonData); chart.draw(data, options); }); chart.draw(data, options); } }, packages:['gauge'] });
<script src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_div"></div>