使用 jQuery 和 Flot 插件绘制图表

Question

 <?php

        while($row = mysql_fetch_assoc($sql))
        {
            $dataset1[] = array($row['dateReport'],$row['totalUniqueView']);
        }

        echo json_encode($dataset1);
    ?>

$(document).ready(function () {
    //Graph scripts here.

        var graphData = <?php echo json_encode($dataset1); ?>;

大家好，我在这里需要帮助。我已经设法按照这里的教程进行操作：http://designmodo.com/create-interactive-graph-css3-jquery/

它运行良好。我试图修改它，以便它可以从我的数据库中读取数据。从上面的代码可以看出，我已经更改并添加了一些 php 行并修改了脚本。但是，它不起作用，它会将奇怪的数据返回到我的图表中。请帮忙。

Answer 1

好的，您的数据存在一些问题。

首先，日期/时间必须以 JavaScript 时间戳的形式提供；摘自the docs：

Flot 中的时间序列支持基于 Javascript 时间戳， 即在任何地方预期或移交时间值，Javascript 使用时间戳编号。这是一个数字，而不是 Date 对象。一种 Javascript 时间戳是自 1 月 1 日以来的毫秒数， 1970 年 00:00:00 UTC。这与 Unix 时间戳几乎相同，除了 它以毫秒为单位，所以记得乘以 1000！

其次，您的数据用引号括起来，这意味着它作为字符串而不是数字传递 - 这将阻止 Flot 正确绘制数据。来自the FAQ：

当我使用 JSON 数据作为源时，Flot 不起作用！

实际上，Flot 喜欢 JSON 数据，只是格式错误。双倍的 检查您没有输入字符串而不是数字，例如 [[“0”，“-2.13”]，[“5”，“4.3”]]。这是最常见的错误，并且 错误可能不会立即出现，因为 Javascript 可以做一些 自动转换。

您应该能够通过生成如下数据来解决这两个问题：

    while($row = mysql_fetch_assoc($sql))
    {
        $dataset1[] = array(strtotime($row['dateReport']) * 1000, (int)$row['totalUniqueView']);
    }