使用 jQuery 和 Flot 插件绘制图表

Posted 2023-02-24

【中文标题】使用 jQuery 和 Flot 插件绘制图表

【英文标题】：Drawing chart with jQuery and Flot Plugin

【发布时间】：2013-12-14 04:41:39

【问题描述】：

 <?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 行并修改了脚本。但是，它不起作用，它会将奇怪的数据返回到我的图表中。请帮忙。

【问题讨论】：

请贴出json_encode($dataset1);的内容

[["2013-08-23","427"],["2013-08-24","679"],["2013-08-25","678"] ,["2013-08-26","1030"],["2013-08-27","1145"],["2013-08-28","1241"],["2013-08-29 ","1265"],["2013-08-30","1292"]]

【参考方案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']);
    

【讨论】：

非常感谢...这真的很有帮助...我现在可以看到我的图表...现在唯一的问题是我的约会搞砸了。我得到这个现在... [1377216000000,427]，[1377302400000,679]，[1377388800000,678]，[1377475200000,1030]，[1377561600000,1145]，[1377648000000,1241]，[1377734400000,1265] [1377820800000,1292]]

我的日期格式是这种格式'2013-10-09'...图表必须以整数显示？谢谢.. 这是最后要解决的问题。

哦，好吧..您想要长数字，您只需要更改时间格式，将其添加到您的 xaxis 代码：timeformat: "%d/%m",

顺便说一下，如果你在做基于时间的图表，你需要包含jquery.flot.time.js javascript文件以及标准flot.js文件

啊，我忘了一件事！但是很好，我知道你很亲密:)