chart.js之可变数据我怎样才能使这项工作？

Question

我试图用一个PHP变量的数据在我chart.js之，但我就是不能使它工作。这是我的尝试之一。

该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

其他图表libaries我注意到qazxsw POI使用highcharts的reasearch的很多后，得到它看起来像这样qazxsw POI

这里是我的解决办法

echo join()