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

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

$(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

您仅在创建图表时添加按钮。
问题是当您使用以下代码时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);
于 2013-08-14T02:58:40.513 回答
0

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

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

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

$(document).ready(function(){

    $("#prof_d").click(function(){
        web_cpu();
    });
});
于 2013-08-14T14:42:16.553 回答
0

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

于 2013-08-14T10:34:51.150 回答