MySQL SELECT沒有以正確的方式返回值，並且谷歌折線圖沒有以期望的方式顯示

Question

我在這裏很新，並且第一次提問，所以我不知道如何提問，但我需要你的。

Image of google line graph

我有在上述的圖2點的問題。

1.我正在重複日期從我的數據庫視圖和是顯示在圖中如上述標記爲和。

2.的日期不與日期正確對齊並在上述圖像被標記爲和也個月，未示出一些倍的圖像中可見。

請幫助我。提前感謝的

PHP & 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; 
} 

谷歌圖表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> 

Answer 1

您的小組還需要將日期時間轉換爲日期，否則您將在數據中看到您在同一天有多個條目，但時間戳稍有不同，這會爲您提供多個節點。

更改此：

... GROUP BY visit_date_time ORDER BY visit_date_time ... 

要這樣：

... GROUP BY DATE(visit_date_time) ORDER BY visit_date_time ... 

這應該做的伎倆。

EDIT

關於第二個問題，計數：-1 - >裝置的其在這裏產生不希望的結果的網格線自動對準。

更改此：

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親自來，因爲我不知道。

Answer 2

確定這裏是我發現

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 } 
     }; 

count：-1 - >表示在此產生不良結果的網格線自動對齊。