0

我正在构建一个仪表板，顶部有按钮，用于显示每月、每周和实时数据。

<div class="zoom_controls"> 
                              <a class="profile" id="monthly_data" href="#" data-chart="line" data-range="6m">Monthly</a>
                              <a class="profile" id="weekly_data"href="#" data-chart="line" data-range="3m">Weekly</a>
                              <a class="profile" id="real_time" href="#" data-chart="line" data-range="1m">Real Time</a>
</div>
<div class="main" id="chart" style="width:700px; height:300px;"></div>

这是调用 php 文件以获取数据并将其插入到 highcharts 中的 javascript：

function cpu_current() {
                //current_cpu_data.php retrieves the data from a flat file
        $.getJSON('current_cpu_data.php', function(data) {
        var chart = new Highcharts.StockChart({
         chart: {
                borderColor: '#98AFC7',
                borderRadius: 20,
                borderWidth: 1,
                renderTo: 'chart',
                type: 'line',
                marginRight: 10,
                zoomType: 'x'
            },

            exporting: {
            enabled: true
        },
           legend: {
            enabled: true,
            backgroundColor: '#FCFFC5',
            borderColor: 'black',
            borderWidth: 2,
            width: 500,
            shadow: true
        },
        plotOptions: {
            series: {
                lineWidth:1
            }
        },
            rangeSelector: {
                enabled:false              
            },

            scrollbar: {
                    enabled: false
                    },
            navigator : {
                enabled : false
            },
            xAxis: {
                gridLineColor: '#EEEEEE',
                gridLineWidth: 1
            },
            yAxis: { // Primary yAxis
                labels: {

                    style: {
                        color: 'blue'
                    }
                },
                gridLineColor: '#EEEEEE',
                gridLineWidth: 0,
                tickInterval: 20,
                min:0,
                max:100,
                plotLines : [{
                    value : 70,
                    color : '#FF3300',
                    dashStyle : 'line',
                    width : 1,
                    label : {
                        text : 'Threshold=70%',
                        align: 'right',
                        style: {
                        fontWeight: 'bold'
                        }
                    }
                }],
                title: {
                    text: '% CPU Utilization',
                    style: {
                        color: 'blue'
                    }
                }
            },

            credits: {
                enabled: false
            },

            title: {
                text: 'CPU',
                style: {
                    color: '#333000',
                    fontSize: '14px'
                }
            },
            subtitle: {
                text: '10 minute peaks in last 24 hours'
                },

            tooltip: {
                pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y} </b><br>',
                valueDecimals: 2
            },
            series:data

    });
    });
}

在这里我可以使用 jquery click 事件在不同的选项卡之间切换：

$("#monthly_data").click(function() {
        hmms_cpu_current();
    });
    $("#weekly_data").click(function() {
        hmms_cpu_weekly();
    });
    $("#real_time").click(function() {
        cpu_current();
    });

我的问题是，当用户只对 real_time 感兴趣并单击并将其留在那里时，我需要 cpu_current() 通过 ajax 调用自行更新。如果用户单击monthly_data 并将其留在那里，cpu_current() 需要停止。

给定上面的代码怎么办？

4

3 回答 3

1

如果您使用的是 MVC 模型，则可以使用特定 javascript 函数的 onclick 方法像这样使用 Ajax，

<script type="text/javascript">
  function hmms_cpu_current() {
    $.ajax({
        type: 'GET',
        async: false,
        url: 'yourcontroller/youraction',
        contentType: "application/json; charset=utf-8",
        dataType: 'json',
        success: function (data) {
            var obj = $.parseJSON(data);

            $.each(data, function (i, item) {

                alert(item.text) // do your stuff with returned value
            });


        },
        error: function () {
            output.text('There was an error loading the data.');
        }
    });
}

于 2013-11-01T14:40:08.007 回答
0

我会添加一个 Javascript Timer() 或 setTimeout() 来重新发送 ajax 调用并更新页面。

您还可以让用户选择执行此操作并将其放入函数中。

如果你给 Timer 一个 ID，你也可以停止和启动它。

于 2013-11-01T14:36:23.327 回答
0

修改所有函数以返回jqXHR如下：

function cpu_current() {
                //$.getJSON return jqXHR, you could use it to abort ajax.
       return $.getJSON('current_cpu_data.php', function(data) {
              //All your code
}

abort在您的事件处理程序中使用：

var currentjqXHR;

    $("#monthly_data").click(function() {
            if (currentjqXHR){
               currentjqXHR.abort();//abort current ajax
            }
            currentjqXHR = hmms_cpu_current();
        });
        $("#weekly_data").click(function() {
            if (currentjqXHR){
               currentjqXHR.abort();//abort current ajax
            }
            currentjqXHR  = hmms_cpu_weekly();
        });
        $("#real_time").click(function() {
            if (currentjqXHR){
               currentjqXHR.abort();//abort current ajax
            }
            currentjqXHR  = cpu_current();
        });
于 2013-11-01T15:11:51.080 回答