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

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

我认为时间是问题所在。

Morris 期望数据按行显示，例如{ 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 include 以匹配新文件名。

文件 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) 中的代码)。但也许它用于计算..)