统计数据页面 - 逐一加载每个统计数据 <div>

Question

我想在我的网页中显示一些 apache 统计信息（每小时累计访问量）。因此我使用 jQuery 和 chart.js.

现在我想通过 ajax（带有加载图标）填充每个图表。

首先，我通过 php 创建了所有 div，同时：

    <?php
        $SQL = $mysqli->query("SELECT * FROM server ORDER BY vname ASC");

        $count = 0;

        while ($row = $SQL->fetch_assoc()){
             $count++;
    ?>
        <div class="col-lg-6">
             <!-- Lines Chart -->
                  <div class="block">
                       <div class="block-header bg-primary">
                           <ul class="block-options">
                               <li>
                                  <button type="button" data-toggle="block-option" data-action="refresh_toggle" data-action-mode="demo"><i class="si si-refresh" style="color:white;"></i></button>
                                </li>
                           </ul>
                           <h3 class="block-title"><?php echo $row['name'];?> <small style="color: white;"><?php echo $row['vname'];?></small></h3>
                            </div>
                       <div class="block-content block-content-full text-center">
                       <!-- Lines Chart Container -->
                       <div style="height: 330px;"><canvas class="js-chartjs-lines-<?php echo $row['HSID'];?>"></canvas></div>
                        </div>
                   </div>
          </div>
<?php
    }
?>

现在我想用 chart.js 属性填充每个 div，如下所示：

<script>
$(document).ready(function(){


    var $chartLinesCon  = jQuery('.js-chartjs-lines-2')[0].getContext('2d');

    var $globalOptions = {
        scaleFontFamily: "'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif",
        scaleFontColor: '#999',
        scaleFontStyle: '600',
        tooltipTitleFontFamily: "'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif",
        tooltipCornerRadius: 3,
        maintainAspectRatio: false,
        responsive: true
    };

    // Chart Data
    var $chartLinesBarsRadarData = {
        labels: [<?php for ($i = 0; $i <= 24; $i++){ echo $i.','; }?>],
        datasets: [
            {
                label: 'This Week',
                fillColor: 'rgba(171, 227, 125, .3)',
                strokeColor: 'rgba(171, 227, 125, 1)',
                pointColor: 'rgba(171, 227, 125, 1)',
                pointStrokeColor: '#fff',
                pointHighlightFill: '#fff',
                pointHighlightStroke: 'rgba(171, 227, 125, 1)',
                data: [15, 16, 20, 25, 0, 0, 23, 25, 32]
            }
        ]
    };

    $chartLines = new Chart($chartLinesCon).Line($chartLinesBarsRadarData, $globalOptions);


});

怎么做最好？

A javascript 'for loop'（+ div 中的隐藏输入元素，用于将 serverID 提供给 ajax 脚本）？

提前致谢。

Answer 1

你需要

将上面 $(document).ready 中的块移动/复制到 AJAX 回调中。
用您的 AJAX 结果替换（当前硬编码的）数组（必要时重新格式化为平面数组）
为
的刷新按钮附加一个 onclick 事件处理程序
1. 在对应的图表实例
2. 用您的加载图标替换 canvas 元素
3. 是否 AJAX 调用（具有上述步骤 1 的回调）
在您的 AJAX 回调处理程序中，在执行剩余步骤（从上面的第 1 步开始）以（重新）初始化图表之前，您将加载图标替换为 canvas

统计数据页面 - 逐一加载每个统计数据 <div>

Statistics page - Load every stats <div> one by one

php

jquery

chart.js