MySQL SELECT 没有以正确的方式返回值，并且谷歌折线图没有以所需的方式显示答案

【问题标题】：MySQL SELECT is not returning values in correct way and google line graph is not showing in desired wayMySQL SELECT 没有以正确的方式返回值，并且谷歌折线图没有以所需的方式显示
【发布时间】：2017-01-21 07:42:18
【问题描述】：

我是新手，第一次问问题，所以我不知道如何提问，但我需要你的帮助。

Image of google line graph

我在上图中有 2 个问题。

1. 我从我的数据库中获得了重复的视图日期，并显示在上面标记为 1 和 2 的图表中。

2. 日期与日期未正确对齐，并在上图中标记为 3，并且在图像中有时未显示月份。

请帮帮我。提前致谢

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

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>

【问题讨论】：

您是否输出了查询的原始结果来诊断问题是在查询中还是在视图中？另外，我不确定您的查询中的“user_id = id”部分试图做什么，我认为其中一个应该是传入的变量。
我认为在这种情况下给 DATE() 一个与列名相同的别名是令人困惑的。此外，没有 ORDER BY 的 LIMIT 也毫无意义——即使存在 GROUP BY 子句
@gwnp 是的，我确实多次显示相同日期的问题不是由于 jquery。它是在 SELECT 查询中将列名 'visit_date_time ' 替换为 'date(visit_date_time) as visit_date_time' 之后出现的。
数据库中visit_date_time的数据类型是什么？我假设 date_time 这就是为什么您尝试将其仅格式化为日期，对吗？
@gwnp 这个图表是仪表板的一部分，所以用户 id 是要显示其每月视图的用户的 id。

标签： javascript php mysql google-visualization linechart

【解决方案1】：

您的 group by 还需要将 datetime 转换为 Date，否则您将在数据中看到同一天有多个条目但时间戳略有不同，这将为您提供多个节点。

改变这个：

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

到这里：

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

这应该可以解决问题。

编辑

对于第二个问题，count: -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 本人，我不确定。

【讨论】：

我不能投票。我的名声不值得支持。
哦，对了，我忘记了另一个，抱歉。这部分我可能无法回答，但我会看看。

【解决方案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 --> 表示网格线的自动对齐，这会在此处产生不良结果。

【讨论】：