如何将WordPress中PHP输出数据转换为CanvasJS图表所需格式？

首先修正你给出的PHP数据结构（原格式存在语法错误），正确的PHP数组形式如下：

$chartData = [
    'line1' => [
        ['x' => '5', 'y' => '8'],
        ['x' => '5', 'y' => '8'],
        ['x' => '5', 'y' => '8']
    ],
    'line2' => [
        ['x' => '5', 'y' => '8'],
        ['x' => '5', 'y' => '8'],
        ['x' => '5', 'y' => '8']
    ]
    // 可继续添加更多lineN键值对，数量支持1-20个
];

接下来用PHP动态生成CanvasJS所需的脚本，核心逻辑是循环处理每组line数据，将字符串类型的x/y转为数字，并自动生成图表的data系列：

<?php
// 你的源数据
$chartData = [
    'line1' => [['x' => '5', 'y' => '8'], ['x' => '5', 'y' => '8'], ['x' => '5', 'y' => '8']],
    'line2' => [['x' => '5', 'y' => '8'], ['x' => '5', 'y' => '8'], ['x' => '5', 'y' => '8']]
];

// 初始化图表基础配置
$chartConfig = [
    'axisX' => [
        'title' => 'Thick Axis line',
        'lineThickness' => 6
    ],
    'data' => []
];

// 循环处理每一组line数据
$seriesIndex = 0;
foreach ($chartData as $seriesTitle => $rawPoints) {
    // 将字符串类型的x/y转为数字，CanvasJS需要数值类型而非字符串
    $formattedPoints = array_map(function($point) {
        return [
            'x' => (int)$point['x'],
            'y' => (int)$point['y']
        ];
    }, $rawPoints);

    // 交替设置图表类型（line/column），可根据需求自定义规则
    $seriesType = $seriesIndex % 2 === 0 ? 'line' : 'column';

    // 将当前系列添加到图表数据数组
    $chartConfig['data'][] = [
        'type' => $seriesType,
        'title' => $seriesTitle,
        'dataPoints' => $formattedPoints
    ];

    $seriesIndex++;
}
?>

<script type="text/javascript">
window.onload = function () {
    var chart = new CanvasJS.Chart("chartContainer", <?php echo json_encode($chartConfig, JSON_PRETTY_PRINT); ?>);
    chart.render();
};
</script>

关键细节说明： #

• 数据类型转换：原数据中的x、y是字符串格式，必须转为整数（或浮点数），否则CanvasJS无法正确渲染图表。
• 动态适配系列数量：通过foreach循环遍历所有lineN数据，不管是1个还是20个系列，都会自动生成对应的图表项。
• 图表类型自定义：示例中用索引奇偶性交替设置line和column类型，你可以直接修改为固定类型（比如全部设为line），或根据系列名称自定义规则。
• JSON编码：使用json_encode将PHP数组转为合法的JS对象，JSON_PRETTY_PRINT参数用于格式化输出，方便调试。

将这段代码放到你的WordPress模板文件（如page.php、single.php）中，或封装成短代码即可使用。

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