使用XMLHttpRequest拉取实时数据后CanvasJS曲线无法显示

问题原因 #

• server.php 存在多余输出：代码开头直接输出了$tension、sortir、aubout三类无关内容，会污染后续返回的页面结构，打断JS代码执行
• XHR插入的JS不会触发window.onload：index.php页面加载完成后才通过XHR插入server.php返回的内容，此时全局window.onload事件已经执行完毕，server.php里绑定的绘图逻辑永远不会触发
• 高频重写DOM导致图表实例丢失：你设置了每秒请求一次server.php，每次都会把link_wrapper里的内容全部替换，刚渲染到一半的图表会被直接销毁
• 资源重复加载：每次请求server.php都会重复加载一次canvasjs.min.js，会引发冲突

修复方案 #

1. 重写server.php，仅返回纯JSON数据 #

移除所有多余输出和HTML结构，只返回需要的电压数据：

<?php
include('connexion.php');
$query = mysqli_query($db, "SELECT valeur from tension ORDER BY id DESC LIMIT 1");
$tension = 0;
if($row = mysqli_fetch_array($query)){
    $tension = floatval($row['valeur']);
}
// 仅返回JSON格式数据，无其他额外输出
echo json_encode(['tension' => $tension], JSON_NUMERIC_CHECK);
?>

2. 调整index.php，将绘图逻辑全部迁移到主页面 #

不再请求完整页面，仅按需拉取数据更新图表，避免频繁重写DOM：

<?php 
include("connexion.php");
?>
<html>
<head>
    <title>实时电压曲线</title>
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
    <!-- 全局仅加载一次CanvasJS资源 -->
    <script src="canvasjs.min.js"></script>
</head>
<body>
    <div class="container">
        <div id="chartContainer" style="height: 370px; width: 100%;"></div>
    </div>
</body>
<script>
var dataPoints = [];
var chart;
var xValue = 0;

window.onload = function() {
    // 初始化图表实例
    chart = new CanvasJS.Chart("chartContainer", {
        theme: "light2",
        title: {
            text: "实时电压值"
        },
        axisX:{
            title: "时间序列"
        },
        axisY:{
            suffix: " V"
        },
        data: [{
            type: "line",
            yValueFormatString: "#,##0.0#",
            toolTipContent: "{y} V",
            dataPoints: dataPoints
        }]
    });
    // 首次加载数据
    loadNewData();
    // 按间隔更新数据，无需重写DOM
    setInterval(loadNewData, 1500);
}

// 仅拉取最新电压数据更新图表
function loadNewData() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      var res = JSON.parse(this.responseText);
      var newTension = res.tension;
      // 新增数据点
      dataPoints.push({ x: xValue, y: newTension });
      xValue++;
      // 可选：保留最近10个数据点，避免图表过于拥挤
      if(dataPoints.length > 10) dataPoints.shift();
      // 重新渲染图表
      chart.render();
    }
  };
  xhttp.open("GET", "server.php", true);
  xhttp.send();
}
</script>
</html>

3. connexion.php无需修改，保持现有代码即可 #

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