Question

我正在努力使用mySQL数据库中的数据来获取数据以填充我的MorrisJS条形图。有人可以协助让它显示在我的条形图上吗？

以下是我当前的代码和页面。

    <?php
$link = mysql_connect('127.0.0.1', 'root', 'password')
   or die('Could not connect: ' . mysql_error());

mysql_select_db('database') or die('Could not select database');

$dataArray=array();

//get data from database
$sql="SELECT * FROM table";
$result = mysql_query($sql) or die('Query failed: ' . mysql_error());
if ($result) {
  while ($row = mysql_fetch_assoc($result)) {
      $Version=$row["Version"];
      $Live=$row["Live"];
      $Preprod=$row["Preprod"];
      //add to data areray
      $dataArray[$Version]=$count;
  }
}
?>

index.php（主页）

div id="morris-bar-chart"></div>
  <?php include ('database.php') ?>

<script src="../js/morris-data.js"></script> <----- script on index.php page linking to morris chart page.

morris.js页面

 Morris.Bar({
    element: 'morris-bar-chart',
    data: [{


while ($row = mysql_fetch_assoc($result)) {
        y:<?=$row['versions']?>,
        Live:<?=$row['Live']?>,
        PreProd: <?=$row['Preprod']?>
    }, {

          ],
    xkey: 'y',
    ykeys: ['Live', 'PreProd'],
    labels: ['Live', 'PreProd'],
    hideHover: 'auto',
    resize: true
});

希望这一切都有意义。提前谢谢。

Answer 1

我认为问题就在于此。

莫里斯希望数据符合预期，例如： { y: '2007', a: 75, b: 65 },

我已经调整了morris.js脚本中的PHP代码部分。

通常，您无法在JS文件中执行PHP。除了，当你向服务器添加规则时，那些JS文件也应该由PHP处理。
获取数据的常规方法是对PHP脚本的AJAX查询，该脚本返回json_encoded($result)。然后使用setData()函数将其添加到Morris。
但这也应该有效：用PHP生成JS文件。您可以将morris-data.js重命名为morris-data.js.php。该文件顶部需要<?php header("Content-type: application/javascript"); ?>。然后调整<script包含以匹配新文件名。

档案morris-data.js.php

<?php header("Content-type: application/javascript"); ?>

Morris.Bar({
  element: 'morris-bar-chart',
  data: [        
  <?php 
      while ($row = mysql_fetch_assoc($result)) {

        // output a line like:
        // { y: '123', Live: 123,  PreProd: 123 },
        sprintf(
            "{ y: '%s', Live: %s, PreProd: %s },",
            $row['version'], 
            $row['Live'],
            $row['Preprod']
        );
      } 
  ?>
  ],
  xkey: 'y',
  ykeys: ['Live', 'PreProd'],
  labels: ['Live', 'PreProd'],
  hideHover: 'auto',
  resize: true
});

应该呈现类似的内容（另请参阅bar chart example）

data: [       
    { y: '1.2.3', Live: 20,  PreProd: 23 },
    { y: '1.2.4', Live: 30,  PreProd: 24 },
    { y: '1.2.5', Live: 40,  PreProd: 25 },
    { y: '1.2.6', Live: 50,  PreProd: 26 }
],

（我不确定database.php文件中的最后一部分是做什么的。也许你可以放弃它（if($result)内的代码）。但也许它的计算..）

morrisJS使用PHP和mysql的条形图人口

1 个答案: