jquery - 使用来自 php 脚本的数据显示 Flot 条形图

Question

我在正确显示这个 flot 条形图时遇到了一些麻烦，到目前为止，flot 文档还不能帮助我。我将首先提供上下文，然后解释我的问题是什么：

• 下面是提供数据的 php 脚本（我只提供了基本的代码行）：

  $sql = "select unix_timestamp(date(Date_Found))*1000 as day, count(Virus_Name) as nb from machine_virus_info where Virus_name!='NULL' group by unix_timestamp(date(Date_Found))*1000;";
  $result = mysql_query($sql);
  
  while ($row = mysql_fetch_array($result, MYSQL_ASSOC))               
  {
          $array[] = array ($row['day'], $row['nb']);
  
  
          #when echoed the array data looks like this using just date  date():
          #[["20130226000","2"],["20130227000","1"]]
  }
  
  echo json_encode( $array );
  

• 以下是我的 html 中的 JS：

<script  id="virus_scan" language="javascript" type="text/javascript">
$(function()
    {
        var options = {
            series:
            {
                lines:  { show: false },
                points: { show: false }, 
                bars:
                {
                    show: true,
                    lineWidth: 1,
                    fill: 1,
                    fillColor: null,
                    align: "left",
                    barWidth: 24 * 60 * 60 * 1000,
                    horizontal: false
                }
            },
            xaxis:  { mode: "time" ,timeformat: "%y/%m/%d" },
            legend: { position:"nw" }
        };

        $.getJSON("php_scripts/virus_scan.php",
            function(data)
                {
                    $.plot($("#virus_scan"),data,options);
                }
            );
    }
);
</script>

• 鉴于上面的信息，这是我得到的条形图，使用 unix_timestamp(date())：

注意：当我们在使用 unix_timestamp(date(date)) 时回显 json_encode($array) 时，数组打印如下：

[["1361833200000","2"],["1361919600000","1"]]

• 这是我只使用 date() 而不是 unix_timestamp(date()) 时得到的条形图：

注意：当我们仅使用 date(date) 回显 json_encode($array) 时，数组打印如下：

[["20130226000","2"],["20130227000","1"]]

理念：

• 我想在 x 轴上正确显示日期

• 我想在 y 轴上显示 nb 的最大值

• 下面的例子：

• 我的代码基于此条形图的代码，但显然结果不一样。

如果有人可以分享一些可能有助于我更好地理解并确定问题的信息，因为我不确定问题是来自 php 处理数据的方式还是条形图配置。

谢谢你，sSmacKk

Answer 1

不要提供点数组，而是使用系列对象数组，如下所示：

[{
    data: [[timestamp, value], ...]
    label: "A"
}, {
    data: [[timestamp, value], ...]
    label: "B"
]

请参阅文档的数据格式部分，向下几段。

您还需要确保您的时间戳和值是整数，而不是示例中的字符串。

最后，您的时间戳必须是 JavaScript (UNIX * 1000) 时间戳；您仅使用“日期”的尝试肯定行不通。