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 ファイルを呼び出してデータを取得し、ハイチャートに挿入する 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 クリック イベントを使用して、異なるタブを切り替えることができます。

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

私の質問はこれです。ユーザーが real_time だけに興味があり、クリックしてそのままにしておくと、ajax 呼び出しを介して独自に更新するには cpu_current() が必要です。ユーザーが Monthly_data をクリックしてそのままにしておくと、cpu_current() を停止する必要があります。

上記のコードを指定すると、これはどのように行われますか?

4

3 に答える 3

0

jqXHR次のようなa を返すようにすべての関数を変更します。

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 に答える
0

ajax 呼び出しを再送信してページを更新する Javascript Timer() または setTimeout() を追加します。

ユーザーにこれを実行するオプションを与えて、関数内に配置することもできます。

タイマーに ID を指定すると、タイマーを停止および開始することもできます。

于 2013-11-01T14:36:23.327 に答える