Question

目前我这样做：

   $(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]]);
            });

我尝试过这样的事情并且部分解决了一个问题。点击按钮后，我得到图表，但我的按钮消失了：

$(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);
    }
});
});

Answer 1

您只在创建图表时添加按钮问题是，当您使用以下代码时，new Highcharts.StockChart...，图表将再次加载，因此它将在没有按钮的情况下呈现。

因此，您有两个选项，添加一个将再次添加按钮的回调，或者使用serie.setData来改变它的数据。

我会选择第二种选择其他问题是答案是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);

Answer 2

您可以使用addSeries()，然后您不需要重置数据，但是如果您使用setData，则会调用重绘，因此可以跳过重绘（）。

Answer 3

在查看了不同的选项之后，我意识到我需要做的事情可能更好地使用html / css类型按钮实现：

https://gist.github.com/kix/3039177

使用jquery click事件我可以将任何类型的图表加载到div：

$(document).ready(function(){

    $("#prof_d").click(function(){
        web_cpu();
    });
});

你如何在高亮度部分调用getJSON

3 个答案: