我有一个小项目，将温度等记录到 MySQL 数据库，我想提供从任何地方访问该信息的功能。 我最初的粗略尝试效果很好(只是一个将 MySQL 数据放入 HTML 表的 PHP 文件)
现在我想在这个项目中使用一些漂亮的图表，尽管我进行了很多很多个小时的谷歌搜索，但我还是失败了。
这是 PHP 和 js/HTML 文件。 (编辑:删除所有 mysql 内容以专注于 php->js 连接) 这是 php 文件。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<body>
<?php
$phpvar = ( {labels: ['One', 'Two', 'Three'], series: [[8, 13, 21]] });
$jsvar = json_encode($phpvar);
?>
</body>
</html>接下来，我尝试从 PHP 脚本中提取数据，以便可以使用图表显示它的 js/HTML 页面...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<! include chartist>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.css">
<script src="https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
<! include ajax jquery >
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
</head>
<body>
<div class="ct-chart ct-double-octave" id="chart1"></div>
<div id="testdiv">
</div>
<script type="text/javascript">
$.getJSON('stackphp.php', function(data) {
var jsvar = JSON.parse(data);
console.log(jsvar);
var sample= {
labels: ['One', 'Two', 'Three'],
series: [
[8, 13, 21],
[1, 2, 3]
]
}
var chart = new Chartist.Bar('.ct-chart', sample);
</script>
</body>
</html>@T.Shah...有趣的是，此代码确实成功显示了示例图...如果删除三行 1 $.getJSON('stackphp.php', function(data) { var jsvar = JSON.parse(数据); console.log(jsvar);`
但是，保留这三行会破坏整个页面...即使图表函数中未使用 jsvar 变量。不知道为什么会这样。
这个项目让我清楚地意识到，我以前实际上很少涉足网络代码。如果我能用指尖捕获我所缺少的东西，我就会根据需要全力以赴。 非常感谢。
最佳答案
所以这个项目教会了我很多关于 javasript、php 和 webstack 的其余部分的知识。 我会尝试概述我原来问题的答案，以防其他人通过谷歌找到这个答案。
首先，使用 php 从 mysql 中获取数据非常简单。这是代码...
设置一组方便的变量...
<?php
$hostname = "localhost";
$username = “mysqladminusername”;
$password = “mysqladminpass”;
$db = “tablename”;
$dbconnect=mysqli_connect($hostname,$username,$password,$db);
if ($dbconnect->connect_error) {
die("Database connection failed: " . $dbconnect->connect_error);
}
?>
然后提取数据......
<?php
set_time_limit (60); //needed to prevent timeout error mysql reports the unlimited script takes ~30sec
$query = mysqli_query($dbconnect, "SELECT * FROM tablename ORDER by idcolumnname DESC limit 2000")
or die (mysqli_error($dbconnect));
?>
然后读取数据并放入 html 表中......并使用每个 mysql 列的内容创建 php 数组。
<?php
while ($row = mysqli_fetch_assoc($query)) {
echo
"<tr>
<td>{$row[‘col1name’]}</td>
<td>{$row[‘col2name’]}</td>
<td>{$row['col3name’]}</td>
<td>{$row[‘col4name’]}</td>
</tr>\n";
$phpcol1[] = $row[‘col1name’];
$phpcol2[] = $row[‘col2name’];
$phpcol3[] = $row[‘col3name’];
$phpcol4[] = $row[‘col4name’];
}
?>
此时，php 数组被格式化为普通的 php“关联数组”……类似这样……。 数组(10) { [0]=> 数组(1) { [“col1name”]=> 字符串(3) "658"} [1]=> 数组(1) { [“col1name”]=> 字符串(3 ) "657"} [2]=> 数组(1) { [“col1name”]=> 字符串(3) "658"} ....这不是很有用，因为图表专家不理解它。
因此我们需要将其转换为图表专家期望的格式，例如[232,345,4545,343,235,32] (请记住，这个数组是图表专家需要的两个数组之一，它需要一个“标签”数组和一个“系列”数组……然后图表专家演示代码将它们放在一起并在最后的代码中使用它们实际上创建了图表图表。)
我们使用 json 编码进行此转换。 这可以分阶段完成，使用变量来分隔代码以提高可读性，或者作为一行代码以保持紧凑性。 紧凑版是我最终选择的方法。 例如……
<script type=“text/javascript”>
var jsonlabelsdatavariable = <?php echo json_encode($phpcol1) ?>;
var jsonseriesdatavariable = <?php echo json_encode($phpcol2) ?>;
//comment…在这里，我发现将格式化的数组数据打印到屏幕上很有用，这样我就可以用眼睛看到变化。为此，我创建了一个像这样的 html dviv 元素......
<div class="container" id=“showmethedata”></div> ……
在 html 页面的正文中，然后我使用以下代码将数组数据放入...
document.getElementById(“showmethedata”).innerHTML
//评论...在测试时，我在图表演示代码中使用了占位符数据，以便我可以在工作演示代码和损坏的自定义代码之间来回切换，并使用开发人员工具来查看问题。因此，下面您将看到图表师演示代码开始时填充了我的占位符数据，然后被清空，然后被 json 变量中的真实数据覆盖。
//这是图表师演示代码......(注意换行，我正在测试会破坏图表师显示的字符，因为我当时遇到的一个问题是所有标签数据都显示在一个点上事实证明，这个问题不是由坏字符引起的，而是我将标签数据推送到单个标签数组元素中。
var data = {
labels: ['2222-02-13_09:12:00','2018-02-13_09:11:00','2018-02-13_09:10:00','2018-02-
13_09:09:00','2018-02-13_09:08:00'],
series: [
[5,2,4,2,0]
]
};
//现在我清空占位符数组...
data.labels.length = 0;
data.series.length = 0;
//现在我用真实数据填充数组......请注意，使用了两种方法。这是由于图表专家期望的格式...标签数组是一个包含元素的单个数组...而系列数组包含一个内部数组，并且该内部数组包含元素。在标签数组上使用 push 方法会导致标签数组显示为图表上单个数据点的标签。
data.labels = data.labels.concat(jsonlabelsdatavariable);
data.series.push(jsonlight);
//最后我们可以构建图表图表...
new Chartist.Line('.ct-chart', data, { width:10000, showArea:true, reverseData: true, });
//最后，我们关闭 javascript 标签。
</script>
我还要注意，我会使用一些自定义函数来编辑我的 php 数组元素的内容，以执行诸如删除空格、添加或删除每个元素周围的引号等操作……但我不认为有任何功能这实际上是必要的。 例如
function addquotes ($element){
return "'{$element}'";
}
$withquotes = array_map("addquotes", $sourcearray);
function killspace ($anothersourcearray){
return str_replace(' ' , '_', $anothersourcearray);
}
$phpkillspace = array_map("killspace", $anothersourcearray);
$unspecial = preg_replace("/[^a-zA-Z 0-9]+/", "", $finalsourcearray );
真是一次冒险。 干杯!
关于javascript - 数据从 mysql 到 php 到 javascript 和 html，供图表师使用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48576233/