morrisJS条形图填充使用PHP和mysql
morrisJS Bar chart population using PHP and mysql
我很难使用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
});
希望这一切都有意义。提前谢谢。
我认为时间是问题所在。
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
});
应该呈现类似的东西(另请参见条形图示例)
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)
中的代码)。但也许是为了计算。)
相关文章:
- 将phonegap图像发布到php/mysql-图像字段从发布请求中消失
- 如何使用jQueryPOST将get变量从JavaScript传递到PHP-Mysql
- 如何使用PHP+MySQL Ajax自动完成jQuery并传递给JavaScript
- 为什么PHP MySQL INSERT通过AJAX调用只是偶尔发生
- 将动态feild数据存储到jquery-mobile和php-mysql中的数据库中
- PHP MySQL 在一个页面和一个查询中插入具有多行的数据
- 多行 PHP MySQL 插入
- 我怎样才能为一个简短的项目托管 HTML/PHP/MySQL
- 如何处理json编码的php-mysql数组
- 根据php/mysql变量中的文本行调整文本区域的大小
- 我们可以用grunt设置一个php/mysql环境吗
- php/mysql搜索结果-当类型>1,同时保持其他类型不>1-代码点火器
- PHP/MySQL:将用户输入保存到数据库
- 使用PHP/MYSQL在phonegap中注册;不起作用
- PHP MySQL值传递到JavaScript
- 使用Javascript将变量传递到php-MySQL脚本
- 如何检查PHP/MYSQL中是否已经存在USERNAME
- 呈现Highcharts的问题-通过PHP/MySQL填充
- 如何在不输出结束PHP标签“?>”的情况下将PHP MySQL查询回显到Javascript变量中
- 通过使用onblur启动Ajax查询到PHP MySQL DB