如何在highchart部分中调用getJSON

how do you call getJSON inside the highchart section

本文关键字：调用 getJSON highchart      更新时间：2023-09-26

目前我正在做这件事：

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

当我点击按钮时，我的图表没有显示任何数据。dpcpu.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);
    }
});
});

您可以使用addSeries（），这样您就不需要重置数据，但在使用setData的情况下，会调用redrawing，因此可以跳过redraw（）。

只有在创建图表时才能添加按钮
问题是，当您使用以下代码时，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);

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

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

使用jquery点击事件，我可以将任何类型的图表加载到div:

$(document).ready(function(){
    $("#prof_d").click(function(){
        web_cpu();
    });
});
相关文章：