如何使用PHP结合Chart.js绘制双变量(x,y)数值坐标图表

解决方案 #

你当前遇到的问题是普通折线图的X轴默认为分类轴，所有传入的数值都会被当做字符串标签按顺序排列，不会按照数值大小计算分布位置，所以才会出现-1、0、1等数值在X轴上排布异常的问题。
你可以直接使用Chart.js的散点图类型，开启折线显示参数即可实现双数值轴的折线图，适配PHP动态输出数据的需求，修改步骤如下：

1. 修改PHP数据处理逻辑

不需要分别拼接X、Y两个独立数组，直接拼接符合Chart.js要求的{x: X轴数值, y: Y轴数值}格式的数据集：

$sql = "SELECT val1 , val2 ,t
FROM DvojeHodnoty
INNER JOIN Pristroje ON DvojeHodnoty.dev_name = Pristroje.dev_name
WHERE t>'$startdate2' AND t< '$enddate2' AND Pristroje.nazev_pristroje='$pristroj' order by t asc;";
$result = mysqli_query($connection, $sql);

// 初始化图表数据集字符串
$chartData = '';
while ($row = mysqli_fetch_array($result))
{
    // 直接拼接x/y结构，不加引号保证为数值类型
    $chartData .= "{x: {$row['val2']}, y: {$row['val1']}},";
}
$start = date('d.m.y', $startdate2/1000);
$end = date('d.m.y', $enddate2/1000);
// 移除末尾多余的逗号
$chartData = trim($chartData,",");

注：如果需要按数值大小顺序连线可以保留原SQL的order by val1 asc，如果需要按数据采集时间顺序连线则使用order by t asc。

2. 修改前端Chart.js配置

将图表类型改为scatter，开启折线显示，明确指定X轴为线性数值轴：

<div id="chart-container" style="background: white">
    <canvas id="chart"></canvas>
    <script>
        var ctx = document.getElementById("chart").getContext('2d');
        var myChart = new Chart(ctx, {
            // 图表类型改为散点图
            type:'scatter',
            data: {
                datasets: [
                    {
                        label: '<?PHP echo $start;?> - <?PHP echo $end; ?> Přístroj: <?PHP echo $pristroj;?>  ',
                        // 直接输出拼接好的x/y数据集
                        data: [<?PHP echo $chartData; ?>],
                        // 开启折线显示
                        showLine: true,
                        backgroundColor:'transparent',
                        borderColor:'rgba(255,99,132)',
                        borderWidth: 3
                    }
                ]
            },
            options: {
                scales: {
                    yAxes:[{
                        // 明确Y轴为线性数值轴
                        type: 'linear',
                        scaleLabel: {
                            display: true,
                            labelString: 'σ',
                            fontSize: 20
                        }
                    }],
                    xAxes:[{
                        // 核心配置：将X轴设为线性数值轴，自动按数值大小排布
                        type: 'linear',
                        scaleLabel: {
                            display: true,
                            labelString: 'ε',
                            fontSize:20
                        }
                    }]
                }
            }
        })
    </script>
</div>

注意事项

• 输出val1、val2数值时不要加引号，确保前端识别为数值类型而非字符串
• 折线的连接顺序完全匹配你PHP输出数据集的顺序，可通过调整SQL的排序规则实现不同的连线逻辑
  该方案完全适配动态数据场景，无论用户选择的日期间隔返回多少条数据，都可以正常渲染双数值轴折线图。

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