Javascript 如何使用数据库中的数据使my chart.js动态化

我知道这差不多是一个两个问题，但我不知道该如何单独提问。

如何将数据编辑为数据库中的数据

如何编辑代码，使其按时间间隔更新

这是我的代码：（我试图缩短代码）

结果

字符串（6）“129.74”

chart.js的脚本（使用虚拟数据）

希望我的问题清楚

我只是想了解一些信息，但我没有正确理解

如何将数据编辑为数据库中的数据

您应该创建一个单独的

php

文件来从数据库获取数据，例如

graph.php

。从数据库中获取数据后，

json\u encode（）

和

print（）

it

$query = "SELECT * FROM `csvhoejde1`";
$result = mysqli_query($conn, $query);
$data = array();
foreach($result as $row){
   $data[] = $row;
}
print(json_encode($data));

如何编辑代码，使其按时间间隔更新

您可以通过

ajax

调用和

setInteval（）

函数来实现这一点

现在，在

chart.js

中，执行以下操作：

function init(){
   $.ajax({
       type : "get",
       url : "graph.php"
       success: function(data){
          var json = JSON.parse(data);

          //remaining of your chart code goes here, add this json to data 
       }
   });
}

setInterval(init, 5000);

如果5000表示5秒，请将其更改为您想要的任何时间

如何将数据编辑为数据库中的数据

您应该创建一个单独的

php

文件来从数据库获取数据，例如

graph.php

。从数据库中获取数据后，

json\u encode（）

和

print（）

it

$query = "SELECT * FROM `csvhoejde1`";
$result = mysqli_query($conn, $query);
$data = array();
foreach($result as $row){
   $data[] = $row;
}
print(json_encode($data));

如何编辑代码，使其按时间间隔更新

您可以通过

ajax

调用和

setInteval（）

函数来实现这一点

现在，在

chart.js

中，执行以下操作：

function init(){
   $.ajax({
       type : "get",
       url : "graph.php"
       success: function(data){
          var json = JSON.parse(data);

          //remaining of your chart code goes here, add this json to data 
       }
   });
}

setInterval(init, 5000);

---

如果5000表示5秒，请将其更改为您想要的任何时间。

我就是这样做的

<?php
       //$sth = $db->prepare("SELECT Actual FROM `csv_1data` WHERE Name = '1) Height 130' ORDER BY FK_palle");
          // USE VALUE FROM <select><option></option></select> INSTEAD OF 1) Height 130
          $sth = $db->prepare("SELECT Actual FROM `Angle` ORDER BY Dato_ur_stillet");
          $sth->execute();
          /* Fetch all of the remaining rows in the result set */
          $result = $sth->fetchAll(PDO::FETCH_COLUMN);
          // $result = explode("@", implode(",@", $result));
          // print_r for at se resultaterne.
          echo'<pre>';
          print_r($result);
          echo'</pre>';
          $std = $db->prepare("SELECT Palle_nr FROM `Angle` ORDER BY `Dato_ur_stillet` ASC");
          $std->execute();
          /* Fetch all of the remaining rows in the result set */
          $palle = $std->fetchAll(PDO::FETCH_COLUMN);
        ?>
      <!----------------------myChart---------------------->
      <script src="./assets/charts/dist/Chart.js"></script>
    <script>



    var canvas = document.getElementById("myChart");
    var ctx = canvas.getContext("2d");

    var horizonalLinePlugin = {
      afterDraw: function(chartInstance) {
        var yScale = chartInstance.scales["y-axis-0"];
        var canvas = chartInstance.chart;
        var ctx = canvas.ctx;
        var index;
        var line;
        var style;

        if (chartInstance.options.horizontalLine) {
          for (index = 0; index < chartInstance.options.horizontalLine.length; index++) {
            line = chartInstance.options.horizontalLine[index];

            if (!line.style) {
              style = "rgba(169,169,169, .6)";
            } else {
              style = line.style;
            }

            if (line.y) {
              yValue = yScale.getPixelForValue(line.y);
            } else {
              yValue = 0;
            }

            ctx.lineWidth = 3;

            if (yValue) {
              ctx.beginPath();
              ctx.moveTo(0, yValue);
              ctx.lineTo(canvas.width, yValue);
              ctx.strokeStyle = style;
              ctx.stroke();
            }

            if (line.text) {
              ctx.fillStyle = style;
              ctx.fillText(line.text, 0, yValue + ctx.lineWidth);
            }
          }
          return;
        };
      }
    };
    Chart.pluginService.register(horizonalLinePlugin);

    var data = {
      labels: [<?php echo join($palle, ',') ?>],
      datasets: [{
        label: "My First dataset",
        fill: false,
        lineTension: 0,
        backgroundColor: "rgba(75,192,192,0.4)",
        borderColor: "rgba(51,150,255,100.2)",
        borderCapStyle: 'butt',
        borderDash: [],
        borderDashOffset: 0.0,
        borderJoinStyle: 'miter',
        pointBorderColor: "rgba(75,192,192,1)",
        pointBackgroundColor: "#fff",
        pointBorderWidth: 1,
        pointHoverRadius: 5,
        pointHoverBackgroundColor: "rgba(75,192,192,1)",
        pointHoverBorderColor: "rgba(220,220,220,1)",
        pointHoverBorderWidth: 2,
        pointRadius: 2,
        pointHitRadius: 10,
        data: [<?php echo join($result, ',') ?>],
      }]
    };

    var myChart = new Chart(ctx, {
      type: 'line',
      data: data,
      options: {
        "horizontalLine": [{
          "y": 130.75,
          "style": "rgba(255, 0, 0, .4)",
        }, {
          "y": 129.1,
          "style": "#00ffff",
        }]
      }
    });
    </script>

---

我就是这样做的

<?php
       //$sth = $db->prepare("SELECT Actual FROM `csv_1data` WHERE Name = '1) Height 130' ORDER BY FK_palle");
          // USE VALUE FROM <select><option></option></select> INSTEAD OF 1) Height 130
          $sth = $db->prepare("SELECT Actual FROM `Angle` ORDER BY Dato_ur_stillet");
          $sth->execute();
          /* Fetch all of the remaining rows in the result set */
          $result = $sth->fetchAll(PDO::FETCH_COLUMN);
          // $result = explode("@", implode(",@", $result));
          // print_r for at se resultaterne.
          echo'<pre>';
          print_r($result);
          echo'</pre>';
          $std = $db->prepare("SELECT Palle_nr FROM `Angle` ORDER BY `Dato_ur_stillet` ASC");
          $std->execute();
          /* Fetch all of the remaining rows in the result set */
          $palle = $std->fetchAll(PDO::FETCH_COLUMN);
        ?>
      <!----------------------myChart---------------------->
      <script src="./assets/charts/dist/Chart.js"></script>
    <script>



    var canvas = document.getElementById("myChart");
    var ctx = canvas.getContext("2d");

    var horizonalLinePlugin = {
      afterDraw: function(chartInstance) {
        var yScale = chartInstance.scales["y-axis-0"];
        var canvas = chartInstance.chart;
        var ctx = canvas.ctx;
        var index;
        var line;
        var style;

        if (chartInstance.options.horizontalLine) {
          for (index = 0; index < chartInstance.options.horizontalLine.length; index++) {
            line = chartInstance.options.horizontalLine[index];

            if (!line.style) {
              style = "rgba(169,169,169, .6)";
            } else {
              style = line.style;
            }

            if (line.y) {
              yValue = yScale.getPixelForValue(line.y);
            } else {
              yValue = 0;
            }

            ctx.lineWidth = 3;

            if (yValue) {
              ctx.beginPath();
              ctx.moveTo(0, yValue);
              ctx.lineTo(canvas.width, yValue);
              ctx.strokeStyle = style;
              ctx.stroke();
            }

            if (line.text) {
              ctx.fillStyle = style;
              ctx.fillText(line.text, 0, yValue + ctx.lineWidth);
            }
          }
          return;
        };
      }
    };
    Chart.pluginService.register(horizonalLinePlugin);

    var data = {
      labels: [<?php echo join($palle, ',') ?>],
      datasets: [{
        label: "My First dataset",
        fill: false,
        lineTension: 0,
        backgroundColor: "rgba(75,192,192,0.4)",
        borderColor: "rgba(51,150,255,100.2)",
        borderCapStyle: 'butt',
        borderDash: [],
        borderDashOffset: 0.0,
        borderJoinStyle: 'miter',
        pointBorderColor: "rgba(75,192,192,1)",
        pointBackgroundColor: "#fff",
        pointBorderWidth: 1,
        pointHoverRadius: 5,
        pointHoverBackgroundColor: "rgba(75,192,192,1)",
        pointHoverBorderColor: "rgba(220,220,220,1)",
        pointHoverBorderWidth: 2,
        pointRadius: 2,
        pointHitRadius: 10,
        data: [<?php echo join($result, ',') ?>],
      }]
    };

    var myChart = new Chart(ctx, {
      type: 'line',
      data: data,
      options: {
        "horizontalLine": [{
          "y": 130.75,
          "style": "rgba(255, 0, 0, .4)",
        }, {
          "y": 129.1,
          "style": "#00ffff",
        }]
      }
    });
    </script>

你的第一个问题是什么，解释一下，我也许能帮你。我需要能够从我的数据库中获取数据。我有一个函数
getHoejde1（）
，它说
select*from table
如果需要，我可以将它添加到代码中。我已经添加了缺少的代码。你的第一个问题是什么，解释一下，我可能可以帮你。我需要能够从数据库中获取数据。我有一个函数
getHoejde1（）
，它说
select*from table
如果需要，我可以将它添加到代码中我已经添加了缺少的代码。
<?php
       //$sth = $db->prepare("SELECT Actual FROM `csv_1data` WHERE Name = '1) Height 130' ORDER BY FK_palle");
          // USE VALUE FROM <select><option></option></select> INSTEAD OF 1) Height 130
          $sth = $db->prepare("SELECT Actual FROM `Angle` ORDER BY Dato_ur_stillet");
          $sth->execute();
          /* Fetch all of the remaining rows in the result set */
          $result = $sth->fetchAll(PDO::FETCH_COLUMN);
          // $result = explode("@", implode(",@", $result));
          // print_r for at se resultaterne.
          echo'<pre>';
          print_r($result);
          echo'</pre>';
          $std = $db->prepare("SELECT Palle_nr FROM `Angle` ORDER BY `Dato_ur_stillet` ASC");
          $std->execute();
          /* Fetch all of the remaining rows in the result set */
          $palle = $std->fetchAll(PDO::FETCH_COLUMN);
        ?>
      <!----------------------myChart---------------------->
      <script src="./assets/charts/dist/Chart.js"></script>
    <script>



    var canvas = document.getElementById("myChart");
    var ctx = canvas.getContext("2d");

    var horizonalLinePlugin = {
      afterDraw: function(chartInstance) {
        var yScale = chartInstance.scales["y-axis-0"];
        var canvas = chartInstance.chart;
        var ctx = canvas.ctx;
        var index;
        var line;
        var style;

        if (chartInstance.options.horizontalLine) {
          for (index = 0; index < chartInstance.options.horizontalLine.length; index++) {
            line = chartInstance.options.horizontalLine[index];

            if (!line.style) {
              style = "rgba(169,169,169, .6)";
            } else {
              style = line.style;
            }

            if (line.y) {
              yValue = yScale.getPixelForValue(line.y);
            } else {
              yValue = 0;
            }

            ctx.lineWidth = 3;

            if (yValue) {
              ctx.beginPath();
              ctx.moveTo(0, yValue);
              ctx.lineTo(canvas.width, yValue);
              ctx.strokeStyle = style;
              ctx.stroke();
            }

            if (line.text) {
              ctx.fillStyle = style;
              ctx.fillText(line.text, 0, yValue + ctx.lineWidth);
            }
          }
          return;
        };
      }
    };
    Chart.pluginService.register(horizonalLinePlugin);

    var data = {
      labels: [<?php echo join($palle, ',') ?>],
      datasets: [{
        label: "My First dataset",
        fill: false,
        lineTension: 0,
        backgroundColor: "rgba(75,192,192,0.4)",
        borderColor: "rgba(51,150,255,100.2)",
        borderCapStyle: 'butt',
        borderDash: [],
        borderDashOffset: 0.0,
        borderJoinStyle: 'miter',
        pointBorderColor: "rgba(75,192,192,1)",
        pointBackgroundColor: "#fff",
        pointBorderWidth: 1,
        pointHoverRadius: 5,
        pointHoverBackgroundColor: "rgba(75,192,192,1)",
        pointHoverBorderColor: "rgba(220,220,220,1)",
        pointHoverBorderWidth: 2,
        pointRadius: 2,
        pointHitRadius: 10,
        data: [<?php echo join($result, ',') ?>],
      }]
    };

    var myChart = new Chart(ctx, {
      type: 'line',
      data: data,
      options: {
        "horizontalLine": [{
          "y": 130.75,
          "style": "rgba(255, 0, 0, .4)",
        }, {
          "y": 129.1,
          "style": "#00ffff",
        }]
      }
    });
    </script>