ajaxとjqueryを使った新しいウィンドウのハイチャート

私は他の人に似たような質問をしましたが、Ajaxとjqueryの質問はありません。私はチャートを描画することができる方法（http://www.highcharts.com/errors/13）ajaxとjqueryを使った新しいウィンドウのハイチャート

私は新しいウィンドウのestadisticasMultiples.html "でチャートを読み込む必要

は、タグのチャートとdiv要素がありますがhighchartsエラーが見つかりません「のdivをレンダリングする」と言います新しいウィンドウで、div内のchartsタグを使用しますか？

私に教えてくれてありがとう。

function ver_grafica(var1, var2, var3){ 

     $.post('ver_grafica.php', 
      { 
       var1:var1, 
       var2:var2, 
       var3:var3 
      } 
     ) 

     .done(function (data) 
      { 
       var datos = JSON.parse(data); 

       var options = { 
        chart: { 
         renderTo: 'charts', 
         width: '800', 
         height: '550' 
        }, 

        title: { 
          text: 'Histórico de '+datos['nombre'] 
        }, 

        subtitle: { 
         text: 'durante el mes de '+mesesNombre[parseInt(datos['mes']-1)]+' de '+datos['anio'] 
        }, 

        yAxis: { 
         title: { 
          text: datos['unidad'] 
         } 
        }, 

        xAxis: { 
         tickInterval: 1 
        }, 

        legend: { 
         layout: 'vertical', 
         align: 'right', 
         verticalAlign: 'middle' 
        }, 

        plotOptions: { 
         series: { 
          pointStart: 1, 
          marker: { 
           enabled: false 
          }, 
         }, 
        }, 

        tooltip: { 
         formatter: function() { 
          return '<b>'+ this.series.name +'</b><br/>'+ 
          '<i>Día '+this.x +': </i><b>'+this.y+'</b>'; 
         } 
        }, 

        legend: { 
         align: 'center', 
         verticalAlign: 'bottom', 
         layout: 'horizontal', // default 
         itemDistance: 50 
        }, 

        colors: ['#2f7ed8', '#FF7777', '#FFC077', '#FFC077', '#FF7777'], 

        series: [{ 
          name: datos['nombre'], 
          data: datos['param'], 
          marker: { 
           symbol: 'circle' 
          }, 
          zIndex: 6 
         }, { 
          name: 'Niveles máximo y mínimo', 
          data: datos['max'], 
          marker: { 
           symbol: 'false' 
          }, 
          zIndex: 1, 
          enableMouseTracking: false, 
         } 
        ] 
       }; 

       var nuevaVentana = window.open('estadisticasMultiples.html', '_blank'); 

       var graficas = new Highcharts.Chart(options); 



      } 
     ) 

     .fail(function() 
      { 
       alert("Falló al intentar enviar los datos"); 
      } 
     ); 
    }

estadisticasMultiples.html

<html> 
    <head></head> 
    <body> 
     <div name='charts' id='charts'></div> 
    </body> 
</html>

出典

2017-03-14 Eduardorq

あなたは、開いたウィンドウでグラフを作成していないが、ウィンドウに指定したコンテナを持っていないAJAX要求を作っています。あなたは、開いたウィンドウからの要素とは、オプションでそれを設定することができますあなたが開いたウィンドウで、アニメーションがグリッチかもしれないスクリプトを使用している場合

var nuevaVentana = window.open('estadisticasMultiples.html', '_blank'); 
var graficas; 

nuevaVentana.onload = function() { 
    options.chart.renderTo = nuevaVentana.document.getElementById('charts'); 
    graficas = new Highcharts.Chart(options); 
}

が、私はestadisticasMultiples.htmlファイルにグラフを描画するためのスクリプトを移動します

：とver_grafica

localStoreまたはグローバル変数を経由して開かれたウィンドウにオブジェクトestadisticasMultiples.html

<html> 
<head> 
    <script src="https://code.highcharts.com/highcharts.js"></script> 
</head> 
<body> 
    <div name='charts' id='chart'></div> 

    <script> 
     var options = window.options; 

     if (options) { 
      Highcharts.chart(options); 
     } 
    </script> 
</body> 
</html>

をオプションを渡します210

function ver_grafica(var1, var2, var3){ 

    $.post('ver_grafica.php', 
     { 
      var1:var1, 
      var2:var2, 
      var3:var3 
     } 
    ) 

    .done(function (data) 
     { 
      var datos = JSON.parse(data); 

      var options = {...} 

      var nuevaVentana = window.open('estadisticasMultiples.html', '_blank'); 

      nuevaVentana.options = options; 
     } 
    ) 

    .fail(function() 
     { 
      alert("Falló al intentar enviar los datos"); 
     } 
    );

出典

2017-03-14 13:23:08 morganfree

多くのありがとう@morganfree、あなたのコーデックは完全に動作します。 – Eduardorq

ajaxとjqueryを使った新しいウィンドウのハイチャート

答えて

関連する問題