Question

所以最近我开始这个页面，其中一堆动态的东西汇集在一起，所以这里是......

1）用户选择（在表单中）他希望看到的数据库表HYDRO中的哪些列（假设这里的例子他选择了PM1，PM2，PM3）

2）然后用户选择实时或静态图表I.e.实时更新图表或过去24小时内的概述（此处为现场示例）

3）

图表被加载，PHP获取包含所有列的数组以及要加载它们的表的名称。
然后，对于每一列，PHP将行时间戳作为标签输出，并将所选列行值作为值输出到Chart.js中的脚本
php代码对foreach循环中请求的每一列重复此操作（同时计算将值除以/乘以等的数字，并不重要）
当页面完成加载所有初始图形时，一个小div获取所有最新数据（从最后一行加载到自身中的每一列），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会使jQuery无法工作，这里是网站页面的链接 http://hmorreels.hol.es/Morreels_App/index.php/charts

我希望有人花时间研究这个问题，我一直在努力尝试而且不会加载：/无论我尝试什么......

PS：我不是在试图懒惰，并且要求你们解决我的问题就像那样，我似乎无法理解整个动态加载jQuery脚本以及为什么他们有时不这样做工作，有时候他们会...

一些额外信息： PHP中使用的$full数组以这种方式包含多个选定的列：

这是使用的包含所有值的atabase表结构的图片

Answer 1

很抱歉浪费（或许）你们有些时间的男生/女孩，

我显然不应该按照我的方式命名我的画布，这与其他一些jQuery变量相冲突，显然搞砸了整个事情，这已经修复了

（更新系统中的一些小错误，但主要问题是修复!! :)）

使用动态数据加载和更新动态图表（chart.js）

1 个答案: