2016-11-07 22 views
1

Google Charts APIを使用して折れ線グラフを描画するアプリケーションを作成しようとしています。 私がセットアップしたことの一つは、 'resize'イベントのウィンドウ上のイベントリスナーです。これにより、線グラフは、新しいウィンドウサイズに合わせて 'window.innerWidth'と 'window.innerHeight'に設定された寸法で再描画されます。電子 'ウィンドウ'が定義されていません

これは、npm startを使用してアプリケーションを実行するとうまく動作します。問題は、私が電子包装機を使用してアプリを構築するときです。それが構築するexeファイルを実行すると、これをスロー:

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="UTF-8"> 
    <title>AP Test Viewer</title> 
    <link rel="stylesheet" href="css/styles.css"> 

    </head> 
    <body ng-app="ApApp" ng-controller="MainController"> 

    <a ui-sref="single">Single</a> 
    <a ui-sref="multi">Multi</a> 

    <ui-view></ui-view> 


    </body> 

    <script> 
    // You can also require other files to run in this process 
    require('./renderer.js'); 
    require('./js/loader.js'); //google charts loader.js 
    require('./js/app.js'); 
    </script> 
</html> 

と私はウィンドウを使用私のアプリの関連する部分はここにある::enter image description here

は、ここに私のHTMLだ私の知る限りとして

app.fun.drawGraph = function(){ 
    if(app.data.graphConfig){ 
     app.data.graphConfig.options.width = window.innerWidth * 0.97; 
     app.data.graphConfig.options.height = window.innerHeight * 0.90; 

     var chart = new google.visualization.LineChart(document.getElementById('chart')); 
     chart.draw(app.data.graphConfig.data, app.data.graphConfig.options); 
     // chart.draw($scope.graphData, google.charts.Line.convertOptions(options));  
    } 
} 

window.addEventListener('resize', function(e){ 
    if(app.data.graphConfig){ 
     app.fun.drawGraph(); 
    } 
}) 

知っている、これはちょうどウェブページ上のjavascriptによってアクセスできるように 'ウィンドウ'でなければならない。

+0

あなたはこれを解決しましたか?私は同じ正確な問題に直面している。 – ThunderWiring

答えて

1

参照している関連するJavascriptが、レンダラープロセスではなくメインプロセスで実行されているようです。 windowを参照するコードをhtmlのスクリプトタグに移動すると、同じ問題は発生しません。

htmlページのファイルを必要とする限り、スクリプトタグ内にあるかのように動作することが期待されます。私は間違っているかもしれません。

関連する問題