1

現在、私はこれをやっています：

   $(function () {
    // Create the chart
$.getJSON('db_cpu.php', function(data) {
    var chart = new Highcharts.StockChart({
        chart: {
            renderTo: 'container'
        },

        rangeSelector: {
            enabled: false
        },

        title: {
            text: 'Database utilization'
        },

        series: data
    }, function (chart) {
        normalState = new Object();
        normalState.stroke_width = null;
        normalState.stroke = null;
        normalState.fill = null;
        normalState.padding = null;
        //normalState.r = null;
        normalState.style = hash('text-decoration', 'underline');

        hoverState = new Object();
        hoverState = normalState;


        pressedState = new Object();
        pressedState = normalState;
        //pressedState.style = hash('text-decoration', 'none');

        chart_1DButton = chart.renderer.button('1D', 52, 10, function () {

            $.getJSON('db_memory.php', function (data) {
                console.log(data);
                chart.series[0].setData(data);
                        chart.redraw();


            });

            unselectButtons();
            chart_1DButton.setState(2);
        }, normalState, hoverState, pressedState);

        chart_1DButton.add();

    });

    function unselectButtons() {
        chart_1DButton.setState(0);
    }
});
});

ボタンをクリックしても、グラフにデータが表示されません。dp_cpu.php と db_memory.php は、名前とデータが既に含まれている json 形式のデータを出力します。たとえば、dp_cpu.php は次のデータを出力します。

[{"name":"ServerA","data":[[1375142940000,1.85],[1375143540000,2.07],[1375144140000,1.96],[1375144740000,1.9],[1375145340000,2.06],[1375145940000,2.03],[1375146540000,1.69],[1375147140000,2.6],[1375147740000,2.1],[1375148340000,1.68],[1375148940000,2.03],[1375149540000,1.83],[1375150140000,1.84],[1375150740000,2.01],[1375151340000,1.88],[1375151940000,1.6],[1375152540000,2.02],[1375153140000,1.27],[1375153740000,1.47],[1375154340000,2],[1375154940000,1.97],[1375155540000,2.51],[1375156140000,3.59],[1375156740000,4.06],[1375157340000,4.13],[1375157940000,4.15],[1375158540000,4.19],[1375159140000,4.13],[1375159740000,4.44],[1375160340000,4.14],[1375160940000,4.15],[1375161540000,5.01],[1375162140000,4.13],[1375162740000,5],[1375163340000,4.97],[1375163940000,5.04],[1375164540000,5.09],[1375165140000,5.14],[1375165740000,4.93],[1375166340000,4.43],[1375166940000,5],[1375167540000,4.93],[1375168140000,5.1],[1375168740000,5.05],[1375169340000,5],[1375169940000,5.12],[1375170540000,4.14],[1375171140000,4.13],[1375171740000,4.85],[1375172340000,4.19],[1375172940000,4.13],[1375173540000,4.17],[1375174140000,2.02],[1375174740000,1.62],[1375175340000,1.77],[1375175940000,2.01],[1375176540000,1.86],[1375177140000,1.85],[1375177740000,2.1],[1375178340000,2.03],[1375178940000,1.79],[1375179540000,2.09],[1375180140000,1.95],[1375180740000,1.73],[1375181340000,2.12],[1375181940000,2.07],[1375182540000,1.65],[1375183140000,2.1],[1375183740000,2.03],[1375184340000,1.63],[1375184940000,2.13],[1375185540000,1.93],[1375186140000,1.65],[1375186740000,2.19],[1375187340000,1.98],[1375187940000,1.69],[1375188540000,2.13],[1375189140000,1.93],[1375189740000,1.72],[1375190340000,2.15],[1375190940000,2.07],[1375191540000,1.7],[1375192140000,2.15],[1375192740000,2.03],[1375193340000,1.73],[1375193940000,2.71],[1375194540000,1.96],[1375195140000,1.72],[1375195740000,2.15],[1375196340000,2.15],[1375196940000,1.85],[1375197540000,2.2],[1375198140000,1.93],[1375198740000,1.8],[1375199340000,2.19],[1375199940000,1.98],[1375200540000,1.85],[1375201140000,2.27]]}]

もう少し情報があります。以下の例のように別の getJSON を実行すると、各シリーズをリセットする必要があるようです。これは本当に不便です。外部ファイルを読み取って、そのファイル内のすべてをチャートとして表示し、チャートを再描画できるようにする必要があります。何か案は？

 $.getJSON('db_memory.php', function (data) {
                console.log(data);
                chart.series[0].setData([[1375142940000,100],[1375143540000,2.07],[1375144140000,1.96],[1375144740000,1.9],[1376408000000,90.06]]);
                chart.series[1].setData([[1375142940000,10],[1375143540000,20.07],[1375144140000,40.96],[1375144740000,50.9],[1376408000000,50.06]]);
                chart.series[2].setData([[1375142940000,10],[1375143540000,20.07],[1375144140000,40.96],[1375144740000,50.9],[1376408000000,20.06]]);
                chart.series[3].setData([[1375142940000,10],[1375143540000,20.07],[1375144140000,40.96],[1375144740000,50.9],[1375145340000,10.06]]);
            });

私はこのようなことを試しましたが、1つの問題で部分的に機能しています。ボタンをクリックすると、グラフが表示されますが、ボタンが消えます。

$(function () {
    // Create the chart
$.getJSON('db_pc.php', function(data) {
    var chart = new Highcharts.StockChart({
        chart: {
            renderTo: 'container'
        },

        rangeSelector: {
            enabled: false
        },

        title: {
            text: 'Database utilization'
        },

        series: data
    }, function (chart) {
        normalState = new Object();
        normalState.stroke_width = null;
        normalState.stroke = null;
        normalState.fill = null;
        normalState.padding = null;
        //normalState.r = null;
        normalState.style = hash('text-decoration', 'underline');

        hoverState = new Object();
        hoverState = normalState;


        pressedState = new Object();
        pressedState = normalState;
        //pressedState.style = hash('text-decoration', 'none');

        chart_1DButton = chart.renderer.button('1D', 52, 10, function () {


            $.getJSON('db_memory.php', function (data1) {
                var chart = new Highcharts.StockChart({
                        chart: {
                            renderTo: 'container'
                        },

                        rangeSelector: {
                            enabled: false
                        },

                        title: {
                            text: 'Database utilization'
                        },

                        series: data1
                    });
            });

            unselectButtons();
            chart_1DButton.setState(2);
        }, normalState, hoverState, pressedState);

        chart_1DButton.add();

    });

    function unselectButtons() {
        chart_1DButton.setState(0);
    }
});
});
4

3 に答える 3

0

addSeries()を使用できる場合はデータをリセットする必要はありませんが、setData を使用する場合は再描画が呼び出されるため、redraw() をスキップできます。

于 2013-08-14T10:34:51.150 に答える
0

チャートの作成時にのみボタンを追加します。
問題は、次のコードを使用するnew Highcharts.StockChart...と、チャートが再度読み込まれるため、ボタンなしでレンダリングされることです。

したがって、ボタンを再度追加するコールバックを追加するか、serie.setDataデータを動的に変更するために使用するという 2 つのオプションがあります。

私は 2 番目のオプションを使用します。
その他の問題は、応答が であるということarrayです。次の方法でアクセスする必要がありますdata[0]

最後に、次のコードがあります。

chart_1DButton = chart.renderer.button('1D', 52, 10, function () {

    $.getJSON('db_memory.php', function (data) {
        // update data
        // chart.series[0].setData( data[0].data );

        // update series' options
        chart.series[0].update(data[0]);
    });

    unselectButtons();
    chart_1DButton.setState(2);
}, normalState, hoverState, pressedState);
于 2013-08-14T02:58:40.513 に答える