我有一个小项目要记录温度等到一个MySQL数据库，我想提供从任何地方访问这些信息。
我最初的粗略尝试工作得很好（只是一个PHP文件，将MySQL数据放入一个HTML表）
现在我想在这个项目中使用一些漂亮的图表，我失败了，尽管许多小时的谷歌搜索。
这是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>接下来，js/HTML页面，我试图从PHP脚本中提取数据，以便可以使用charist显示它。。。
<!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>@沙阿。。。有趣的是，这段代码确实成功地显示了一个示例图…如果去掉三行1$.getJSON（'stackphp.php'，function（data）{
var jsvar=JSON.parse（数据）；
控制台日志（jsvar）`
不过，把这三行放进去，就把整页都弄坏了。。。即使在charist函数中没有使用jsvar变量。不知道为什么。
这个项目让我清楚地知道，我以前实际上很少涉足web代码。如果我能抓住我丢失的东西，我会尽可能多地抓住它。
非常感谢。
最佳答案
所以这个项目教会了我很多关于javasript、php和其他webstack的知识。
如果有人通过google找到了这个问题，我会尝试勾勒出我最初问题的答案。
首先，使用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”}
……这不是很有用，因为图表师不理解。
所以我们需要把它转换成charist期望的格式，例如[232345455343235,32]
（请记住，这个数组是charist需要的两个数组之一，它需要一个“labels”数组和一个“series”数组……然后charist演示代码将它们组合在一起，并在实际创建charist图的最后一位代码中使用它们。）
我们使用json编码进行转换。
这可以分阶段完成，使用变量来分离代码以提高可读性，或者作为一行代码以提高紧凑性。
紧凑版是我最后选择的方法。
例如…。
<script type=“text/javascript”>
var jsonlabelsdatavariable = <?php echo json_encode($phpcol1) ?>;
var jsonseriesdatavariable = <?php echo json_encode($phpcol2) ?>;
//注释…这里我发现将格式化的数组数据打印到屏幕上很有用，这样我就可以用眼睛看到变化。为此，我创建了一个像这样的html dviv元素…。
<div class="container" id=“showmethedata”></div>…。在html页面的主体中，然后我将数组数据与以下代码一起放入…
document.getElementById(“showmethedata”).innerHTML
//注释…当我测试这个时，我在图表演示代码中使用占位符数据，这样我就可以在工作的演示代码和损坏的自定义代码之间来回切换，并使用开发人员工具来查看问题。所以在下面，您将看到图表演示代码开始填充占位符数据，然后清空，然后用json变量中的实际数据覆盖。
//这是charist演示代码……（注意换行符，我正在测试会破坏charist显示的字符，因为当时我遇到的一个问题是所有标签数据都显示在图形的一个点上。结果发现这个问题不是来自坏字符，而是我将标签数据推送到一个标签数组元素中。
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;
//现在我用真实的数据填充数组…注意，使用了两种方法。这是由于charist期望的格式…labels数组是一个包含元素的数组…而series数组包含一个内部数组，而该内部数组包含元素。对labels数组使用push方法导致labels数组显示为图形上单个数据点的标签。
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以与chartist一起使用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48576233/