显示折线图，其中包含使用 morris.js、PHP 和 MySQL 从数据库检索的数据

Question

我正在使用 Bootstrap 4 模板，该模板使用 morris.js 作为图表。我有一个数据库，我试图从中检索数据，问题是它没有动态显示在图表上。

我已经处理了该查询并尝试在文件 morris.js 中回显它。我已经尝试了堆栈溢出上找到的解决方案，但我看不出问题出在哪里。

这是index.php：

<div class="card">
  <div class="header">
     <h2>line Chart</h2>
 </div>
   <div class="body">
     <div id="m_area_chart"></div>
 </div>
</div>

这是 MySQL 查询：

$sql3 = "SELECT DATE_FORMAT(`date`, '%H:%i') `time`, water_level as water_level, battery as battery FROM `tbl_water_level` WHERE `date` > SUBDATE( NOW(), INTERVAL 24 HOUR)";
$result3 = mysqli_query($conn, $sql3);
$chart_data = '';
while($row3 = mysqli_fetch_array($result3))
{
 $chart_data .= "{ period:'".$row3["time"]."', water_level:'".$row3["water_level"]."', battery:".$row3["battery"].", }, ";
}
$chart_data = substr($chart_data, 0, -2);
$chart_data = array();
 foreach ($result3 as $row3) {
 $chart_data[] = $row3;
 }

print json_encode($chart_data);

SELECT 查询没问题。但是， while 语句可能存在问题。此外，到目前为止它还没有抛出任何错误。我运行查询，这是它返回的内容：

[{"time":"13:45","water_level":"0.25","battery":"0"}]

我的问题是，如何让 X 轴显示

time

以及两条图表线显示

water_level

和

battery

。

这是文件 morris.js：请注意，x 轴上的period 是最初显示的年份（2000,2001,2002 等）。我认为它已经在另一个JS文件中计算出来了。我将 xkey 保留为句点，因为在 MySQL 查询中我放入了数组。

$(function() {
    "use strict";
    MorrisArea();
});

function MorrisArea() {
    Morris.Area({
        element: 'm_area_chart',
        data: [<?php echo json_encode($chart_data); ?>
        ],
        xkey: 'period',
        ykeys: ['water_level', 'battery'],
        labels: ['water_level', 'battery'],
        pointSize: 2,
        fillOpacity: 0,
        pointStrokeColors: ['#2cbfb7', '#5dcef6', '#c0d0d6'],
        behaveLikeLine: true,
        gridLineColor: '#eeeeee',
        lineWidth: 1,
        hideHover: 'auto',
        lineColors: ['#2cbfb7', '#5dcef6', '#c0d0d6'],
        resize: true

    });
}

这是我期望显示的图表（我调整了 X 轴以放置时间，以便我们可以看到我想要的内容）：

()

Answer 1

文档在

xkey

选项的描述中列出了以下内容：

包含属性名称的字符串，该属性包含日期 (X) 值。

时间戳以毫秒时间戳的形式接受（由

Date.getTime()

返回或作为以下格式的字符串：

• 2012

• 2012 Q1

• 2012 W1

• 2012-02

• 2012-02-24

• 2012-02-24 15:00

• 2012-02-24 15:00:00

• 2012-02-24 15:00:00.000

如果您以想要使用的格式从数据库中选择数据（列别名为

period

而不是

time

），那么您可以将完整结果集直接传递给 json_encode：

<?php

mysqli_report(MYSQLI_REPORT_ERROR | MYSQLI_REPORT_STRICT);

$db = new mysqli('127.0.0.1', 'user', 'pass', 'test', 3306);
$db->set_charset('utf8mb4');
$db->options(MYSQLI_OPT_INT_AND_FLOAT_NATIVE, 1);

$sql = <<<'SQL'
    SELECT DATE_FORMAT(`date`, '%Y-%m-%d %H:%i') AS period, water_level, battery
    FROM tbl_water_level
    WHERE `date` > NOW() - INTERVAL 24 HOUR
    ORDER BY `date` ASC;
    SQL;

$result = $db->query($sql);
$chart_data = json_encode($result->fetch_all(MYSQLI_ASSOC));

您的问题表明您的js文件正在由PHP解析，因此您可以填充数据选项。这是一个非常糟糕的主意，并且部分地破坏了将 js 放在单独文件中的意义。您可以将 JSON 分配给 js 全局变量或图表 div 的数据属性，然后您的 js 文件就可以被视为应有的静态资源。