как вы называете getJSON внутри секции highchart

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

, когда я нажал на кнопку, мой график не Diplay никаких данных. dp_cpu.php и db_memory.php выводит данные json, которые уже имеют имя и данные. Для exmaple 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 вызывается перерисовка, поэтому redraw() можно пропустить.

Answer 3

после просмотра различных вариантов, я понял, что мне нужно сделать, может быть лучше реализованы с помощью кнопок типа HTML/CSS:

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

И используя событие JQuery клик я могу загрузить любой вид диаграммы в DIV :

$(document).ready(function(){ 

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