Question

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

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

首先我通过php创建div的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);


});

如何以最好的方式做到这一点？

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

提前致谢。

Answer 1

你需要

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

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

1 个答案: