这是我的密码：
<?php
/* Your Database Name */
$DB_NAME = 'temp_database';
/* Database Host */
$DB_HOST = 'localhost';
/* Your Database User Name and Password */
$DB_USER = 'root';
$DB_PASS = '';
/* Establish the database connection */
$mysqli = new mysqli($DB_HOST, $DB_USER, $DB_PASS, $DB_NAME);
if (mysqli_connect_errno()) {
printf("Connect failed: %s\n", mysqli_connect_error());
exit();
}
$dateFrom=isset($_GET['datepickerFrom']) ? $_GET['datepickerFrom'] : '';
$dateTo=isset($_GET['datepickerTo']) ? $_GET['datepickerTo'] : '';
if($dateFrom && $dateTo !=NULL)
{
$dateFrom = new DateTime($dateFrom);
$dateTo = new DateTime($dateTo);
$dateFrom = mysqli_real_escape_string($mysqli, $dateFrom->format('Y-m-d'));
$dateTo = mysqli_real_escape_string($mysqli, $dateTo->format('Y-m-d'));
}
if($dateFrom && $dateTo !=NULL)
{
$result = $mysqli->query("SELECT datetime,temperature FROM tempLog where datetime between '$dateFrom%' and '$dateTo%' order by datetime ASC"); //"2018-03-15" AND "2018-03-26"
//print_r($result);
}
else
{
$result = $mysqli->query("SELECT datetime,temperature FROM tempLog order by DateTime");
}
echo "$dateFrom<br/>";
echo "$dateTo<br/>";
$rows = array();
$table = array();
$table['cols'] = array(
array('label' => 'Date-Time', 'type' => 'string'),
array('label' => 'Temperature', 'type' => 'number')
);
/* Extract the information from $result */
foreach($result as $r) {
$temp = array();
// The following line will be used to slice the Pie chart
$temp[] = array('v' => (string) $r['datetime']);
// Values of the each slice
$temp[] = array('v' => (float) $r['temperature']);
$rows[] = array('c' => $temp);
}
$table['rows'] = $rows;
// convert data into JSON format
$jsonTable = json_encode($table);
//echo $jsonTable;
//header("Refresh: 50"); //Put the seconds after which the page needs to be refreshed
?>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
/*$(window).on("throttledresize", function (event) {
drawChart();
});*/
function drawChart() {
// Create our data table out of JSON data loaded from server.
var data = new google.visualization.DataTable(<?=$jsonTable?>);
var options = {
title: 'Temperature Record updated every 5 seconds',
//is3D: 'true',
curveType: 'function',
width: "100%",
height: 500,
//legend: 'top',
axisTitlesPosition: 'out',
'isStacked': true,
colors: ['#0598d8', '#f97263'],
chartArea: {
left: "15%",
top: "5%",
bottom:"40%",
height: "100%",
width: "100%"
},
vAxis:{
title:'Temperature'
},
hAxis: {
title:'Date',
minValue: 0,
maxValue: 50 },
//curveType: 'function',
pointSize: 3,
dataOpacity: 0.6,
animation: {
duration: 500,
startup: true, //This is the new option
easing:'out'
}
};
// Instantiate and draw our chart, passing in some options.
// Do not forget to check your div ID
//var chart = new google.visualization.LineChart(document.getElementById('visualization'));
//chart.draw(data, options);
var i=data.getNumberOfRows();
//alert(i);
function resize() {
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
window.onload = resize();
window.onresize = resize;
}
</script>
<style type="text/css">
body {
width:100%;
height: 100%;
margin:5% auto auto auto;
//background:#e6e6e6;
}
</style>
</head>
<body>
<!--<center><h1>Temperature Graph</h1></center>-->
<div style="display:block;
zoom: 1;
text-align: center;">
<form id="dateselect" action="date.php" method="GET">
<div style="display: inline-block; margin:5px;">From: <input type="text" name ="datepickerFrom" id="datepickerFrom" style=""></div>
<div style="display: inline-block; margin: 5px;">To: <input type="text" name="datepickerTo" id="datepickerTo"></div><br>
<div style="display: inline-block;"><input type="submit" value="Submit" /></div>
<div style="display: inline-block;"><button type="button" onClick="window.location.reload();">Refresh</button></div>
</form>
</div>
<div class = "container" id="chart_div"></div> <!--Load bootstrap container for responsiveness-->
<script>
$( function() {
$( "#datepickerFrom,#datepickerTo" ).datepicker( {
//showButtonPanel: true,
changeMonth:true,
changeYear:true
});
} );
</script>
</body>
</html>问题：
我能够获取数据并填充我的图表。但是我需要的是折线图应该以增量的方式填充，以便给它一个加载类型的效果。
在options中使用“animate”在每次加载页面时都会从页面下方拉一条“线”。我不想那样。我希望它的动画，使它逐步填补我的图表。
我在stackoverflow上看到了几个帖子，人们需要加载类似的效果，他们最终通过在图表中最初放置空值，然后加载数据来工作。但在我的例子中，这些值不是硬编码的，我从数据库中获取它们作为json。我不知道如何在每次页面刷新/加载时首先加载空数据，然后加载原始的db获取值。
如果有人能解决这个问题，那会很有帮助的。谢谢：）
编辑：
我想要这样的东西http://jsfiddle.net/hdu8h/ 从这篇文章或这篇文章中，但是对于硬编码的数据值，这些可以很容易地完成。。我需要使用从数据库中获取的动态值来绘制它们。
暂无答案！
目前还没有任何答案，快来回答吧！