统计信息页面 - 逐个加载每个统计信息<div>


一个接一个。

我想在我的网页内显示一些apache统计数据(每小时累积访问)。因此,我使用jQuery与chart.js。

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

首先,我创建了所有的div的php while:

    <?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);

});

如何做这个最好的方法?

一个javascript 'for循环'(+隐藏的输入元素在div给予的服务器id到ajax脚本)?

你需要

  1. 移动/复制你在上面的$(document).ready块到你的AJAX回调

  2. 用AJAX结果替换(当前硬编码的)数组(必要时重新格式化为平面数组)

  3. 为刷新按钮附加onclick事件处理程序

    1. 对应的图表实例

    2. 上调用.destroy()
    3. 用你的加载图标替换canvas元素

    4. AJAX调用(具有上面步骤1的回调)

  4. 在您的AJAX回调处理程序中,在执行剩余步骤(从上面的第1步开始)(重新)初始化图表

  5. 之前,您将加载图标替换为画布。

最新更新