我在这里很新,第一次提问,所以我不知道如何提问,但我需要你的帮助。
我在上图中有两个问题。
1。我从我的数据库中获取视图的重复日期,并显示在上面的图表中,标记为 1 和 2 。
2。日期未与日期正确对齐,并在上图中标记为 3 ,并且图像中也会显示几个月的时间。< / p>
请帮帮我。感谢提前
php&amp; MySQL代码
function AdminViews()
{
if(!$this->DBLogin())
{
$this->HandleError("Database login failed!");
return false;
}
$out_query = "SELECT count(ip_address) AS count, date(visit_date_time) as visit_date_time FROM db_views WHERE user_id = id GROUP BY visit_date_time ORDER BY visit_date_time LIMIT 30 ";
$result = mysqli_query($this->connection,$out_query);
while($row = mysqli_fetch_array($result))
{
$resultset[] = $row;
}
if(!empty($resultset))
return $resultset;
}
Google Graph Javascript代码
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([ ['Date', 'Views']
<?php
$results = $ClassName->AdminViews();
if(!empty($results)){
foreach($results as $row) {
$vDate = str_replace("-",", ",$row['visit_date_time']);
echo ",[new Date('".$vDate."'),".$row['count']."]";
}
} ?> ]);
var options = {
pointSize: 5,
legend: { position: 'top', alignment: 'end' },
hAxis: { format: 'MMM dd, yyyy', gridlines: {count: -1, color: '#fff'} },
vAxis: { minValue: 0 }
};
var chart = new google.visualization.LineChart(document.getElementById("barChart"));
chart.draw(data, options);
} </script>
在浏览器Js就像这样
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([ ['Date', 'Views']
,[new Date('2017, 01, 01'),6],[new Date('2017, 01, 02'),6],[new Date('2017, 01, 03'),6],[new Date('2017, 01, 04'),6],[new Date('2017, 01, 05'),7],[new Date('2017, 01, 06'),5],[new Date('2017, 01, 07'),5],[new Date('2017, 01, 07'),3],[new Date('2017, 01, 08'),3],[new Date('2017, 01, 08'),4],[new Date('2017, 01, 09'),2],[new Date('2017, 01, 10'),2],[new Date('2017, 01, 10'),6],[new Date('2017, 01, 11'),6],[new Date('2017, 01, 12'),6],[new Date('2017, 01, 13'),6],[new Date('2017, 01, 14'),6],[new Date('2017, 01, 15'),6],[new Date('2017, 01, 16'),6],[new Date('2017, 01, 17'),10],[new Date('2017, 01, 18'),30],[new Date('2017, 01, 19'),3],[new Date('2017, 01, 20'),3] ]);
var options = {
pointSize: 5,
legend: { position: 'top', alignment: 'end' },
hAxis: { format: 'MMM dd, yyyy', gridlines: {count: -1, color: '#fff'} },
vAxis: { minValue: 0 }
};
var chart = new google.visualization.LineChart(document.getElementById("barChart"));
chart.draw(data, options);
}
</script>
答案 0 :(得分:2)
您的分组还需要将日期时间转换为日期,否则您将在数据中看到同一天有多个条目但时间戳略有不同,这将为您提供多个节点。
改变这个:
... GROUP BY visit_date_time ORDER BY visit_date_time ...
对此:
... GROUP BY DATE(visit_date_time) ORDER BY visit_date_time ...
这应该可以解决问题。
修改强>
对于您的第二个问题,计数:-1 - &gt;意味着网格线的自动对齐,这会产生不良结果。
改变这个:
var options = {
pointSize: 5,
legend: { position: 'top', alignment: 'end' },
hAxis: { format: 'MMM dd, yyyy', gridlines: {count: -1, color: '#fff'} },
vAxis: { minValue: 0 }
};
对此(如您所知):
var options = {
pointSize: 5,
legend: { position: 'top', alignment: 'end' },
hAxis: { slantedText: 'true', format: 'MMM dd', gridlines: {count: 10, color: 'none'} },
vAxis: { minValue: 0 }
};
免责声明:第二个答案来自OP本人,因为我不确定。
答案 1 :(得分:0)
好的,这是我找到的解决方案
1。更改
... GROUP BY visit_date_time ORDER BY visit_date_time ...
按照@gwnp 的建议
... GROUP BY DATE(visit_date_time) ORDER BY visit_date_time ...
和
2。更改
var options = {
pointSize: 5,
legend: { position: 'top', alignment: 'end' },
hAxis: { format: 'MMM dd, yyyy', gridlines: {count: -1, color: '#fff'} },
vAxis: { minValue: 0 }
};
到这个
var options = {
pointSize: 5,
legend: { position: 'top', alignment: 'end' },
hAxis: { slantedText: 'true', format: 'MMM dd', gridlines: {count: 10, color: 'none'} },
vAxis: { minValue: 0 }
};
计数:-1 - &gt;表示网格线的自动对齐,这会产生不希望的结果。