【问题标题】:Flot Chart from PHP来自 PHP 的 Flot Chart
【发布时间】:2018-09-20 18:58:12
【问题描述】:

我正在尝试使用数据库中的值制作一个浮动图表。我现在如何拥有它,该图表仅绘制 1 个数据点。我怎样才能让它绘制数组中的其余数据?我正在尝试绘制每个日期输入的代理总数。 var data2 将用于丢失的代理

<?php

      foreach($mysqli->query('SELECT COUNT(*), agent_date_entered, agent_id 
      FROM agents GROUP BY agent_date_entered 
      ORDER BY agent_date_entered') as $row) {

        $count[] = $row['COUNT(*)'];
        $agent[] = $row['agent_id'];
        $date[] = $row['agent_date_entered'];

      }
?>

<script>
    var data, data1, options, chart;
    var data1 = [ <?php echo json_encode($count); ? > , < ? php echo json_encode($date); ?> ];
    var data2 = [];

    data = [{
        data: data1,
        label: "Agents Gained",
        lines: {
            show: true
        },
        points: {
            show: true
        }
    }, {
        data: data2,
        label: "Agents Lost",
        lines: {
            show: true
        },
        points: {
            show: true
        }
    }];
    options = {
        legend: {
            position: "nw"
        }
    };
    $(document).ready(function () {
        chart = $.plot($("#placeholder"), data, options);
    });
</script>

【问题讨论】:

  • 在数据库中执行查询是否返回正确的结果?
  • 是的。 print_r ($count); 也显示正确的结果
  • 好的,这听起来像是 JS/flot 问题,而不是 mysql 或 PHP 问题。
  • $count$date 是什么类型?该代码看起来只有一个计数日期对,它只会给出一个数据点。对于更大的图表,您需要一个日期计数对数组。
  • $count 是每个 $date 的记录总数。我不确定我是否正确地这样做了,但是当我 print_r ($count);它确实给了我预期的结果数量。我在数据库中有一些示例数据,它为 print_r ($count); 提供了数组 ( [0] => 1 [1] => 1 )。如果我更改日期,它只会检索一个结果。当我做 echo json_encode($count);回声 json_encode($date);它输出 ["1","1"]["2018-08-01","2018-09-03"]。

标签: javascript php mysql flot


【解决方案1】:

您的数据格式不是 Flot 所要求的。你需要类似的东西

[[1, 1533081600000], [1, 1535932800000]]

(或[[1533081600000, 1], [1535932800000, 1]],如果您想要 x 轴上的日期)。
喜欢1535932800000 的数字是JavaScript 时间戳。您还需要带有日期/时间值的轴上的选项 mode: 'time'

有关详细信息,请参阅 Data formatTime series data 下的文档。

【讨论】:

  • 非常感谢您提供的那些非常有帮助的链接。
【解决方案2】:

借助其中一个 cmets 中指向 Data formatTime series data 的链接,我找到了我正在寻找的答案。

以防万一其他人遇到此问题,这是我如何使其工作的。首先,我将sql语句中的日期改为:(UNIX_TIMESTAMP(agent_date_depart)*1000) AS date。然后我在设置变量$depart = json_encode(floatval($row['date'])); 时对其进行了编码。为了使它在 x 轴上不是一个巨大的数字并显示为日期,我将 x 轴设置为:xaxis: {mode: "time", timeformat: "%Y/%m/%d"},。您甚至可以像这样使用 tooltipOpts 在工具提示中设置日期格式:

    tooltipOpts: {
        content: function (label, x, y) {
            var date = new Date(+x);
            var tooltip = '<h4>' + label + '</h4><ul>';
            tooltip += '<li>Date ' + date.toLocaleDateString() + '</li>';
            tooltip += '<li>Total Count: ' + y + '</li></ul>';
            return tooltip;
        },

我发现让数据显示在图表中的最简单方法是,我将 sql 语句放在 data 变量中,如下所示:

        var d2 = [

<?php

         $sql = "SELECT COUNT(agent_id), (UNIX_TIMESTAMP(agent_date_depart)*1000) AS date FROM agents
          WHERE agent_date_depart BETWEEN '$bdatecy' AND '$edatecy'
          GROUP BY agent_date_depart ";
          $result = mysqli_query($mysqli, $sql);
           while ($row = mysqli_fetch_assoc($result)) {

    $agent = $row['COUNT(agent_id)'];
    $depart = json_encode(floatval($row['date']));

    echo "[".$depart.", ".$agent."],";
  }

?>

  ];

希望这会有所帮助,我想再次感谢您提供这些链接。

【讨论】:

    猜你喜欢
    • 2016-06-17
    • 1970-01-01
    • 2015-06-06
    • 2017-01-16
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多