如何在PHP页面中利用JSON数组渲染Morris JS折线图

我来帮你搞定这个问题，咱们分两步走：先把从MySQL拿到的JSON字符串整理成Morris.js需要的格式，再在前端渲染折线图。

第一步：PHP端解析并整理数据 #

你现在的$rows数组里，每个元素都包含一个json_data_records字段，这个字段是JSON格式的字符串。咱们需要把这些字符串解码成PHP数组，然后统一收集起来：

// 初始化空数组，用来存放整理好的图表数据
$chartData = [];

// 遍历数据库返回的结果
foreach ($rows as $row) {
    // 将JSON字符串解码为关联数组（第二个参数true很关键）
    $record = json_decode($row['json_data_records'], true);
    
    // 确保解码成功，再添加到数组中（避免无效JSON破坏数据）
    if ($record !== null) {
        $chartData[] = $record;
    }
}

第二步：前端用Morris.js渲染折线图 #

接下来需要把整理好的$chartData传给前端，然后初始化Morris折线图。首先要引入Morris.js的依赖（jQuery、Raphael和Morris本身），然后编写渲染代码：

1. 引入依赖和图表容器 #

在你的PHP页面的<head>或者<body>底部添加以下代码：

<!-- 引入Morris.js所需依赖 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.3.0/raphael.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<!-- 引入Morris的样式文件 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">

<!-- 折线图的容器，设置高度保证图表正常显示 -->
<div id="sensor-chart" style="height: 300px;"></div>

2. 初始化折线图 #

在依赖引入之后，添加JavaScript代码，把PHP的$chartData转换为前端可用的JSON数据，然后初始化图表：

<script>
$(document).ready(function() {
    // 从PHP获取整理好的图表数据（json_encode会自动转成JS能识别的格式）
    var chartData = <?php echo json_encode($chartData); ?>;

    // 创建Morris折线图
    new Morris.Line({
        // 指定图表要渲染到哪个容器
        element: 'sensor-chart',
        // 图表使用的数据
        data: chartData,
        // X轴对应的字段（你的数据里是dateRecorded）
        xkey: 'dateRecorded',
        // Y轴对应的传感器字段
        ykeys: ['sensor1', 'sensor2'],
        // 图例显示的名称
        labels: ['Sensor 1 温度', 'Sensor 2 温度'],
        // 可选：自定义X轴日期显示格式，避免默认格式不友好
        xLabelFormat: function(date) {
            var d = new Date(date);
            // 格式化为YYYY-MM-DD HH:mm
            return `${d.getFullYear()}-${(d.getMonth()+1).toString().padStart(2, '0')}-${d.getDate().toString().padStart(2, '0')} ${d.getHours().toString().padStart(2, '0')}:${d.getMinutes().toString().padStart(2, '0')}`;
        },
        // 可选：自定义Y轴数值格式，显示两位小数和单位
        yLabelFormat: function(y) {
            return `${y.toFixed(2)}°`;
        },
        // 可选：开启鼠标悬停提示
        hideHover: false
    });
});
</script>

几个需要注意的点 #

• 确保json_decode的第二个参数是true，这样得到的是关联数组，后续json_encode后才是Morris.js需要的JSON对象数组
• 检查你的JSON字符串是否有效，如果有格式错误，json_decode会返回null，所以加个判断避免无效数据混入
• 依赖的版本要兼容，比如Morris.js 0.5.1和jQuery 3.6.0、Raphael 2.3.0是兼容的，不要用太新的jQuery版本可能会出问题
• 如果日期显示异常，检查dateRecorded的格式是否能被JavaScript的Date对象正确解析，必要时可以在PHP端先格式化日期

内容的提问来源于stack exchange，提问作者jclifford90