Chart.js 變量數據我怎樣才能做到這一點？

Question

我試圖在我的 Chart.js 中使用一個 php 變量作為數據，但我無法讓它工作。 這是我的嘗試之一。

print_r($data);

$data = 129.74, 130.74, 129.50, 129.10, 129.80, 129.74, 129.90, 129.74

和我的代碼（我已經縮短了它以便更容易閱讀）

<div>
<?php
  $sth = $db->prepare("SELECT Actual FROM csvhoejde1");
  $sth->execute();

  /* Fetch all of the remaining rows in the result set */
  $result = $sth->fetchAll(PDO::FETCH_COLUMN, 0);
  $result = explode("@", implode(",@", $result));
  // print_r for at se resultaterne.
  foreach ($result as $data) {
    echo'<pre>';
    print_r($data);
    echo'</pre>';
  }
?>

這是我的 chart.js 腳本

  <script src="./assets/charts/dist/Chart.js"></script>
  <script>

  var jArray = <?php echo json_encode($data); ?>;


  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: ["1", "2", "3", "4", "5", "6", "7","8", "9", "10", "11", "12", "13", "14","15", "16", "17", "18", "19", "20", "21", "22", "23", "24","25", "26", "27", "28", "29", "30", "31", "32", "33", "31"],
    datasets: [{
      label: "My First dataset",
      fill: false,
      lineTension: 0,
      backgroundColor: "rgba(75,192,192,0.4)",
      borderColor: "rgba(75,192,192,1)",
      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: 4,
      pointHitRadius: 10,
      data: [jArray],
    }]
  };

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

  </script>

這是圖表的外觀。 它獲取第一個數據，然后停止。

任何幫助表示贊賞。 （我只需要一個包含數據庫數據的圖表，我使用 pdo）

我可以用$result得到相同的結果，我得到第一個數據點。 像這樣

  <?php
  $sth = $db->prepare("SELECT Actual FROM csvhoejde1");
  $sth->execute();

  /* Fetch all of the remaining rows in the result set */
  $result = $sth->fetchAll(PDO::FETCH_COLUMN, 0);
  $result = explode("@", implode(",@", $result));
  // print_r for at se resultaterne.
  echo'<pre>';
  print_r($result);
  echo'</pre>';

?>

腳本：

var jArray = <?php echo json_encode($result); ?>;
for ($i = 0; $i < jArray.length; $i++) { 
...
data: [jArray[$i]],

Answer 1

...
$data = [];
// set all data to d.
foreach ($result as $d) {
  $data[] = $d;
}
?>

在chart.js中

var jArray = <?php echo implode(',', $data); ?>

Answer 2

在對其他圖表庫進行了大量研究后，我注意到 highcharts 使用了echo join()並使其看起來像這樣

這是我的解決方案

<div class="row bg-dark">
    <div class="col-12 border">
    <canvas id="myChart"></canvas>
    </div>
</div>

<div class="container">
  <div>
    <?php
      $sth = $db->prepare("SELECT Actual FROM csvhoejde1");
      $sth->execute();

      /* Fetch all of the remaining rows in the result set */
      $result = $sth->fetchAll(PDO::FETCH_COLUMN, 0);
      // $result = explode("@", implode(",@", $result));
      // print_r for at se resultaterne.
      echo'<pre>';
      print_r($result);
      echo'</pre>';

    ?>
  <div>
</div>
  <!----------------------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: ["1", "2", "3", "4", "5", "6", "7","8", "9", "10", "11", "12", "13", "14","15", "16", "17", "18", "19", "20", "21", "22", "23", "24","25", "26", "27", "28", "29", "30", "31", "32", "33", "31"],
  datasets: [{
    label: "My First dataset",
    fill: false,
    lineTension: 0,
    backgroundColor: "rgba(75,192,192,0.4)",
    borderColor: "rgba(75,192,192,1)",
    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: 4,
    pointHitRadius: 10,
    data: [<?php echo join($result, ',') ?>],
  }]
};

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