Google Charts - Animacja wykresu Gauge nie działa

Próbuję utworzyć wykresy GAUGE w Google Graphs. Moim celem jest załadowanie danych ze strony php i automatyczne odświeżanie. Udało mi się to zrobić, ale kiedy dane są odświeżane, linie wskaźnika nie są animowane, ale zamiast tego są przerysowywane z nowych. Chciałbym zobaczyć tę fajną animację: https://jsfiddle.net/api/post/library/pure/. Właściwie to ładuję dane z pliku statycznego, wtedy utworzę dane z bazy danych MySQL (przetestowane i działające). Oto mój kod:Google Charts - Animacja wykresu Gauge nie działa

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>

a tu 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}]} 
     ] 
}

Wykres ładuje losowo sampleData2.json lub sampleData.json, ale na wykresie nie ma żadnych anomii.

Co jest nie tak?

Dzięki!

Simon

Źródło

2016-08-24 Simon

https://jsfiddle.net/api/post/library/pure/is blank :) –

Przepraszamy, jest to oparte na anomenie pokazane w google doc: https://google-developers.appspot.com/chart/interactive/docs/gallery/gauge – Simon

według supported modifications na wykresie Gauge,
animacja tylko wtedy, gdy wartość w danych zmienia

ponieważ wykres nie animować na startup,
narysować wykres początkowo z wartościami ustawionymi na wartość min,
lub wartością, przy której powinna się rozpocząć animacja

następnie użyć jednorazowo słuchacza'ready' zdarzeń, aby narysować wykres z rzeczywistych danych
spowoduje to wykres animować

patrz poniższy fragment pracy ...

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>

jak wspomniano, powyższe wykresy będą ożywiać ...

od ustawionych wartości domyślnych - do rzeczywistych otrzymanych danych

w celu uzyskania wykresu do animacji ...

z poprzedniego rzeczywistym danych - do nowych danych otrzymanych

trzeba by zapisać odwołanie do chart
zamiast tworzenia nowego chart, za każdym razem jest on sporządzony

także , zdecydowanie nie polecam nie używając async: false na $.ajax zadzwoń
użyj zamiast tego obsługi success

polecić tę konfigurację, która będzie animować od początkowego losowania przy użyciu wartości domyślnych
następnie animować z poprzednimi danymi, do nowych danych na każdym przedziale

google.charts.load('current', { 
    callback: function() { 
    // save reference to chart 
    var chart = null; 

    drawChart(); 

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

    function drawChart() { 
     $.ajax({ 
     url: 'http://URL/fetch_data3.php?type=gauge', 
     dataType: 'json', 
     success: function (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 data; 
      if (chart === null) { 
      chart = new google.visualization.Gauge(document.getElementById('chart_div')); 

      // data with min values 
      data = new google.visualization.DataTable({ 
       "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}]} 
       ] 
      }); 

      google.visualization.events.addOneTimeListener(chart, 'ready', function() { 
       data = new google.visualization.DataTable(jsonData); 
       chart.draw(data, options); 
      }); 
      } else { 
      data = new google.visualization.DataTable(jsonData); 
      } 

      chart.draw(data, options); 
     } 
     }); 
    } 
    }, 
    packages:['gauge'] 
});

Źródło

2016-08-24 13:57:03 WhiteHat

Dzięki pracowałam WSPANIAŁE !! ! – Simon

Google Charts - Animacja wykresu Gauge nie działa

Odpowiedz

Powiązane problemy