Question

我有一个chart.php页面，其中包含一个Chart.js条形图。如果将其作为Web服务器的索引文件，它会显示正常。

但是，我现在正尝试从index.php文件加载此页面，以使图表能够连续重新加载。

另外，两个文件都能完美运行。但是，当我打开index.php来打开chart.php时，图表外的文本就会显示，但是图表应该有一个空白。

index.php：

<!DOCTYPE html>
<html>
<body onload=setInterval();>
<body>
<div id="demo">
</div>
<script>
var myVar = setInterval(loadDoc, 1000);
function loadDoc() {
var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
                document.getElementById("demo").innerHTML = this.responseText;
    }
  };
        xhttp.open("GET", "chart.php", true);
        xhttp.send();
}
</script>
</head>
</body>
</html>

chart.php：

<?php
  $db = new SQLite3('/var/www/html/newdb.db');
  $result = ($db->query('SELECT * FROM NUMBERS'));

  $avg_stack = array();
  $name_stack = array();

  while ($res = $result->fetchArray(SQLITE3_ASSOC)){
    $avg = $res["AVG"];
    $name = $res["NAME"];
    echo ("<br>");
    echo($name . ": " . $avg);
    array_push($avg_stack, $avg);
    array_push($name_stack, $name);
  }

  $db->close();
?>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.c
ss">
  <title>My Chart.js Chart</title>
</head>
<body>
    <div id="demo" class="container">
    <canvas id="myChart"></canvas>
    <input type="button" value="Add Data" onclick="adddata()">
  </div>

  <script>
    var data_array = [<?php echo '"'.implode('","', $avg_stack).'"' ?>];
    var name_array = [<?php echo '"'.implode('","', $name_stack).'"' ?>];

    var colour_array = [];

    var dynamicColour = function() {
            var r = Math.floor(Math.random() * 255);
            var g = Math.floor(Math.random() * 255);
            var b = Math.floor(Math.random() * 255);
            return "rgb(" + r + "," + g + "," + b + ")";
    };

    for (var i in data_array) {
        colour_array.push(dynamicColour());
    }

    let myChart = document.getElementById('myChart').getContext('2d');
        let massPopChart = new Chart(myChart, {
                  type:'bar', // bar, horizontalBar, pie, line, doughnut, radar, polarArea
                  data:{
                        labels:name_array,
                        datasets:[{
                          label:'Population',
                          data:data_array,
                          backgroundColor:colour_array,
                          borderWidth:1,
                          borderColor:'#777',
                          hoverBorderWidth:3,
                          hoverBorderColor:'#000'
                        }]
                  },
                  options:{
                  }
                });
        function adddata() {
                var newposition = data_array.length;
                data_array.push(Math.floor(Math.random() * 700000) + 5000);
                colour_array.push(dynamicColour());
                massPopChart.data.datasets[0].data[newposition] = data_array[newposition];
                massPopChart.data.labels[newposition] = "Newly Added";
                massPopChart.update();
        }

  </script>
</body>
</html>

初始回显（$ name。“：”。$ avg）;显示正常，按钮显示正常，但没有图表。同样，当将chart.php设为index.php时，效果很好。

PHP Chart.js页面未显示图表

0 个答案: