ハイチャートはajaxコールで反応しません

Question

node.jsアプリケーションでは、チャートの可視化にhighcharts APIを使用しています。グラフが存在するdivはonloadに隠されています。 onclick関数が呼び出されると、グラフがdivに表示されます。 onclick関数にはバックエンドからグラフデータを準備したajax呼び出しが含まれています。

しかし、問題はグラフが反応しないことです.itはdivから展開されます。 このグラフをどのように反応させることができますか？

function showPanel(Abc_param1){ 
 
    var Abc_param2=$('#reportrange').data('daterangepicker').startDate; 
 
    var Abc_param3=$('#reportrange').data('daterangepicker').endDate; 
 

 
    Abc_param1=parseFloat(Abc_param1) 
 

 
    var panel = $(this).parents(".panel"); 
 
    panel_refresh(panel); 
 

 
    $("#hide_section10").hide() 
 
    $("#hide_section11").hide() 
 

 
    $("#hide_section15").hide() 
 
    $("#footer_text").hide() 
 
    var url = '/Abc_url?Abc_param1='+Abc_param1+'&Abc_param2='+Abc_param2+'&Abc_param3='+Abc_param3; 
 
    $.ajax({ 
 
     'url': url, 
 
     'async': true, 
 
     'type': 'get', 
 
     'success': function (data) { 
 
      device_chart.series = [{ 
 
       name: 'Device', 
 
       data: [ 
 
        { name: 'Mobile', y: data.Mobile }, 
 
        { name: 'Desktop', y: data.Desktop }, 
 
        { name: 'Tab', y: data.Tab } 
 
       ] 
 
      }] 
 
      $("#people_read").highcharts(device_chart); 
 
      $("#hide_section1").show(); 
 
      $("#hide_section10").show() 
 
      $("#hide_section11").show() 
 
      $("#hide_section15").show() 
 

 

 
     } 
 
    }) 
 

 
}

Answer 1

は、AJAX成功機能でJsのコードでは0

Answer 2

にminPaddingとmaxPaddingを設定してみてください

を追加し、私はより良く理解するために投稿したonclick関数のサンプルコードがあります

$("#people_read").highcharts(device_chart); 
$('#people_read').highcharts().reflow() 

そして、HTMLレンダリングのdivは

です

<div id="people_read" style="width:100%;margin: 0 auto"></div> 

編集

詳細説明

リフロー（） そのコンテナにグラフをリフローします。デフォルトでは、チャートは、chart.reflowオプションに従って、window.resizeイベントの後にコンテナに自動的にリフローされます。しかし、divのサイズ変更には信頼できるイベントはありません。したがって、ウィンドウのサイズ変更イベントなしでコンテナのサイズを変更する場合は、明示的に呼び出す必要があります。

Resize div and reflowとpop up and reflow

From Highcharts Option Reference