如何实现PHP生成适配Chart.js的JSON以构建气泡图

我来帮你梳理下问题并给出解决方案，你的核心问题是PHP调用Python后生成的JSON格式不符合Chart.js的要求，咱们一步步来修复：

你当前的Python代码输出的是Python语法的列表，不是标准JSON格式（比如用单引号、数组式的label），Chart.js根本识别不了。咱们改成用json模块输出标准JSON：

import sys
import json

if __name__=='__main__':
    # 按照Chart.js的dataset格式构造数据
    chart_datasets = [
        {
            'data': [{'x':10 ,'y':10, 'r':30}],
            'backgroundColor': 'rgb(141,63,223)',  # 单个颜色可以直接写字符串，数组也支持
            'label': 'test1'  # Chart.js的label是字符串，不是数组！
        },
        {
            'data': [{'x':20 ,'y':20, 'r':50}],
            'backgroundColor': 'rgb(255,99,132)',
            'label': 'test2'
        }
    ]
    # 转成标准JSON字符串输出
    print(json.dumps(chart_datasets))
    sys.stdout.flush()  # 强制刷新输出，避免PHP端获取不到内容

原来的exec会把Python的每一行输出存到$output数组里，而我们的Python现在输出的是一行完整的JSON字符串，不需要再用json_encode（否则会多套一层数组，导致Chart.js报错）：

<?php 
    $pyfile = "python ./test.py"; 
    exec($pyfile, $output, $rtn); 
    // 取Python输出的第一行（也就是完整的JSON）
    $chart_json = isset($output[0]) ? $output[0] : json_encode([]);
?>

直接把PHP输出的JSON传给Chart.js的配置即可，不需要额外解析：

<canvas id="bubbleChart" width="400" height="400"></canvas>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    // 直接拿到PHP输出的原生JS对象
    const datasets = <?php echo $chart_json; ?>;
    
    const ctx = document.getElementById('bubbleChart').getContext('2d');
    new Chart(ctx, {
        type: 'bubble',
        data: {
            datasets: datasets  // 直接作为datasets传入
        },
        options: {
            scales: {
                x: { type: 'linear', position: 'bottom' },
                y: { type: 'linear' }
            }
        }
    });
</script>

• 千万别用Python原生的print(列表)输出，必须用json.dumps()转成标准JSON；
• PHP端不要重复JSON编码，否则会把JSON字符串再包一层数组；
• Chart.js的dataset格式要严格对应：label是字符串，data里的每个气泡是包含x/y/r的对象。

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