Chart.js散点图无法使用PHP传入的数组常量问题求助

尝试用Chart.js制作散点图，X、Y轴数据来自PHP通过SQL查询获取的数组。直接使用整数时图表可正常显示，但使用这些常量数组时却无法正常渲染。此前用类似方法实现折线图是正常的，刚接触JavaScript，寻求技术解决方法。

相关代码如下：

const e80_array = <?php echo json_encode($e80_result_array) ?>;
const e110_array = <?php echo json_encode($e110_result_array) ?>;

const e80_avg_array = <?php echo json_encode($e80_avg) ?>;
const e110_avg_array = <?php echo json_encode($e110_avg) ?>;

const e80_serials= <?php echo json_encode($e80_serial) ?>;
const e110_serials = <?php echo json_encode($e110_serial) ?>;

// console.log(e80_array);
// console.log(e80_avg_array);
// console.log(e80_serials);

const e80data = {
labels: e80_serials,
datasets: [
    {
        label: 'E80',
        data: [
            {x: e80_array, y: e80_avg_array}
        ],
        backgroundColor: 'rgba(255, 0, 0, 0.2)',
        borderColor: 'rgb(255, 0, 0)',
        borderWidth: 1
    }
]};

const e80config = {
type: 'scatter',
data: e80data,
options: {
    hoverRadius: 15
}
};
 
var e80Chart = new Chart(
document.getElementById('e80Chart'),
e80config
);

已确认SQL查询能正确获取并生成数组，控制台输出示例：

Array [ "172", "172" ]
Array [ "197.0", "193.0" ]

问题核心是散点图的数据格式错误：你现在把整个数组赋值给单个点的x和y，但Chart.js的散点图要求data是一个对象数组，每个对象对应一个散点，格式为{x: 单个数值, y: 单个数值}。

修改步骤： #

• 配对数组元素：将e80_array和e80_avg_array中的对应元素一一配对，生成每个散点的坐标对象。
• 转换数据类型：控制台输出的是字符串格式的数值，需要转成数字类型（整数/浮点数），避免Chart.js解析异常。

修改后的关键代码部分：

// 生成正确的散点数据数组
const e80ScatterData = e80_array.map((xVal, index) => {
    return {
        x: parseInt(xVal), // 转整数，若需要浮点数用parseFloat
        y: parseFloat(e80_avg_array[index])
    };
});

const e80data = {
    labels: e80_serials,
    datasets: [
        {
            label: 'E80',
            data: e80ScatterData, // 替换为配对后的数组
            backgroundColor: 'rgba(255, 0, 0, 0.2)',
            borderColor: 'rgb(255, 0, 0)',
            borderWidth: 1
        }
    ]
};

说明： #

• 使用Array.map()遍历e80_array，同时通过index关联e80_avg_array的对应元素，生成每个散点的坐标。
• 折线图可以直接使用数组是因为折线图的data支持纯数值数组，而散点图必须是包含x和y的对象数组，这是两种图表类型的数据格式差异。

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