所以最近我开始了这个页面，其中有一堆动态的东西聚集在一起，所以这里是......
1) 用户选择(以表单形式)他想要查看数据库表 HYDRO 中的哪些列(假设这里他选择 PM1、PM2、PM3)
2) 然后用户选择实时或静态图表，即实时更新图表或过去 24 小时的概述或其他内容(例如此处的实时)
3)
加载图表，PHP 获取包含所有列的数组以及从中加载它们的表的名称。
然后，对于每一列，PHP 将行时间戳作为标签输出，并将所选列的行值作为值从 Chart.js 输出到脚本
- PHP 代码对 foreach 循环中请求的每一列重复此操作(还计算将值除/乘以等的数字，这并不重要)
- 当页面完成加载所有初始图表时，一个小 div 会获取所有最新数据(dB 最后一行的每一列加载到自身中)，chart.js 脚本会从此隐藏中加载所需的值分区。
这以前可以工作，但遗憾的是，自从我进入 foreach php 循环来循环不同的图表后，它们就不再显示了......
我尝试使用 $(document).ready(function(){}); 但遗憾的是这不起作用。
<?php
$mysqli = new mysqli("db4free.net", "rafaello104", "06071994", "morreels");
// GET COMPANY NAME THAT WE ARE FEEDING
// ====================================
if (!isset($full["company_identifier"])) {
$company_identifier = 1;
} else { $company_identifier = $full["company_identifier"];}
//die(print_r($full));
$bedrijf = $full['MYSQL_TABLE'];
$result = $mysqli->query("SELECT * FROM $bedrijf WHERE entry_ID ORDER BY updated DESC LIMIT 20");
$row = $result->fetch_assoc();
$current_feed = array();
while ($row = $result->fetch_assoc()) {
$current_feed[] = $row;
}
?>
<div id="cmd" style=""> Entry Counter:
<div class="flip-wrapper">
<div id="data_load">
</div>
</div>
</div>
<?php foreach ($full["columns"] as $column_key => $column_values): ?>
<?php
if ($column_key == "load_live") {
continue;
}
$column_operator = $column_values["operator"];
$column_numerator = $column_values["numerator"];
$column_numer_orig = $column_values["numerator"];
if ($column_operator == "x") {
$column_numerator = 1 / $column_numerator;
}
$SQL_name = $column_key;
$display_name = $column_values["value"];
?>
<!--
=======================================================================
=======================================================================
*********************** START <?php echo $display_name ?> *************************
=======================================================================
=======================================================================
-->
<script>
$(document).ready(function(){
var ctx = $('#<?php echo $column_key; ?>').get(0).getContext("2d");
var data = {
labels: [
"<?php echo $display_name . " @: " . substr($current_feed[10]['updated'], 11); ?>",
"<?php echo $display_name . " @: " . substr($current_feed[8]['updated'], 11); ?>",
"<?php echo $display_name . " @: " . substr($current_feed[6]['updated'], 11); ?>",
"<?php echo $display_name . " @: " . substr($current_feed[4]['updated'], 11); ?>",
"<?php echo $display_name . " @: " . substr($current_feed[2]['updated'], 11); ?>",
"<?php echo $display_name . " @: " . substr($current_feed[0]['updated'], 11); ?>",
"<?php echo $display_name . " @: " . substr($most_recent['updated'], 11); ?>"
],
datasets: [
{
label: "Today:",
fillColor: "rgba(59, 89, 152, 0.4)",
strokeColor: "rgba(59, 89, 152, 0.6)",
pointColor: "#fff",
pointStrokeColor: "rgba(59,89,152,1)",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: [
<?php echo round($current_feed[10][$SQL_name] / $column_numerator, 2); ?>,
<?php echo round($current_feed[8][$SQL_name] / $column_numerator, 2); ?>,
<?php echo round($current_feed[6][$SQL_name] / $column_numerator, 2); ?>,
<?php echo round($current_feed[4][$SQL_name] / $column_numerator, 2); ?>,
<?php echo round($current_feed[2][$SQL_name] / $column_numerator, 2); ?>,
<?php echo round($current_feed[0][$SQL_name] / $column_numerator, 2); ?>,
<?php echo round($most_recent[$SQL_name] / $column_numerator, 2); ?>
]
}
]
};
var <?php echo $column_key; ?>_chart = new Chart(ctx).Line(data, {
bezierCurves: false,
scaleOverride: true,
scaleSteps: 10,
scaleStepWidth: 10,
scaleStartValue: 0,
responsive: true,
animation: false
});
setInterval(function update() {
// Update one of the points in the second dataset
<?php echo $column_key; ?>_chart.datasets[0].points[0].value = <?php echo $column_key; ?>_chart.datasets[0].points[1].value;
<?php echo $column_key; ?>_chart.datasets[0].points[1].value = <?php echo $column_key; ?>_chart.datasets[0].points[2].value;
<?php echo $column_key; ?>_chart.datasets[0].points[2].value = <?php echo $column_key; ?>_chart.datasets[0].points[3].value;
<?php echo $column_key; ?>_chart.datasets[0].points[3].value = <?php echo $column_key; ?>_chart.datasets[0].points[4].value;
<?php echo $column_key; ?>_chart.datasets[0].points[4].value = <?php echo $column_key; ?>_chart.datasets[0].points[5].value;
<?php echo $column_key; ?>_chart.datasets[0].points[5].value = <?php echo $column_key; ?>_chart.datasets[0].points[6].value;
<?php echo $column_key; ?>_chart.scale.xLabels[0] = <?php echo $column_key; ?>_chart.scale.xLabels[1];
<?php echo $column_key; ?>_chart.scale.xLabels[1] = <?php echo $column_key; ?>_chart.scale.xLabels[2];
<?php echo $column_key; ?>_chart.scale.xLabels[2] = <?php echo $column_key; ?>_chart.scale.xLabels[3];
<?php echo $column_key; ?>_chart.scale.xLabels[3] = <?php echo $column_key; ?>_chart.scale.xLabels[4];
<?php echo $column_key; ?>_chart.scale.xLabels[4] = <?php echo $column_key; ?>_chart.scale.xLabels[5];
<?php echo $column_key; ?>_chart.scale.xLabels[5] = <?php echo $column_key; ?>_chart.scale.xLabels[6];
$live_<?php echo $column_key; ?> = $('#live_<?php echo $column_key; ?>').html();
$live_<?php echo $column_key; ?> = parseInt($live_<?php echo $column_key; ?>);
$live_<?php echo $column_key; ?> = $live_<?php echo $column_key; ?> / <?php echo $column_numerator; ?>;
$live_updated = $('#live_updated').html().substr(20);
<?php echo $column_key; ?>_chart.scale.xLabels[6] = $live_updated;
<?php echo $column_key; ?>_chart.datasets[0].points[6].value = $live_<?php echo $column_key; ?>;
console.log('Latest <?php echo $column_key; ?> value = ' + $live_<?php echo $column_key; ?> + ' this has been updated @: ' + $live_updated);
<?php echo $column_key; ?>_chart.update();
}, 10000);
});
</script>
<div class="col colspan-1-of-2" id="pm_charts">
<h3><?php echo $display_name; ?> chart</h3>
<p>This value is calculated by <?php if($column_operator == "/") {echo "dividing";} else { echo "multiplying";}?> the received value by <?php echo $column_numer_orig ?> and then <br/> rounding it up / down to 2 numbers behind the comma.</p>
<canvas id="<?php echo $column_key; ?>" width="650px" height="300px"></canvas>
</div>
<!--
=======================================================================
=======================================================================
*********************** END <?php echo $display_name ?> *************************
=======================================================================
=======================================================================
-->
<?php endforeach; ?>
<script>
$ii = 0;
setInterval(
function update() {
$ii++;
console.log("Checked dB " + $ii + " times.");
$('#data_load').load('/Morreels_App/public/scripts/js/connection_loop.php');
},
2000);
</script>
我知道这看起来一定很困惑，但简单的事情是根据在加载页面之前放入的 php 输入加载动态 jQuery 脚本，这通常会阻止 jQuery 工作，这是该网站页面的链接 http://hmorreels.hol.es/Morreels_App/index.php/charts
我希望有人花时间研究这个，我一直在尝试，但它不会加载:/无论我尝试什么......
PS:我并不是想偷懒并要求你们像那样为我解决问题，我只是似乎无法理解整个动态加载 jQuery 脚本以及为什么它们有时不这样做工作，有时他们确实......
一些额外信息:
PHP 中使用的 $full 数组包含多个选定的列，如下所示:
这是使用的数据库表结构的图片，其中包含所有值
最佳答案
很抱歉浪费了(也许)你们的一些时间，伙计们/女孩们，
我显然不应该以我的方式命名我的 Canvas ， 这与其他一些 jQuery 变量发生冲突，显然把整个事情搞乱了，这已被修复
(更新系统中存在一些小错误，但主要问题已修复!!:))
关于php - 使用动态数据加载和更新动态图表 (chart.js)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36695530/