EONチャートがページに表示されないload

最初のページの読み込みに空白のページが表示されないEONチャートがあります。別のブラウザタブに切り替えた後、グラフのタブにまっすぐ戻ると、グラフが表示されます。EONチャートがページに表示されないload

ここにHTML/JavaScriptとCSSがあります。

あなたのお手伝いがありがとうございます。ここで

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 

<script type="text/javascript" src="http://pubnub.github.io/eon/v/eon/0.0.10/eon.js"></script> 
<link type="text/css" rel="stylesheet" href="http://pubnub.github.io/eon/v/eon/0.0.10/eon.css"/> 

<link rel="stylesheet" type="text/css" href="poolstyle.css"> 

<head>   
</head> 

<body> 
<script type="text/javascript"> 

    var pubnub = PUBNUB.init ({publish_key: 'xxx', 
       subscribe_key: 'xxx', 
       error: function (error) {console.log('Error:', error)}}); 

    var GraphChannel = "xxx"; 
    var h = true; 

    charttemp = eon.chart({ 

      pubnub: pubnub, 
      channel: GraphChannel, 
      limit: 1440, 
      history: h, 
      flow: true, 
      generate: { 
         bindto: "#charttemp", 
         data: { colors : {}, type: "spline"}, 
         transition: {duration: 250}, 
         axis: { x: {label: "Time", show: false}}, 
         grid: { x: {show: false}, y: {show: true}}, 
        }, 
      transform: function (m) 
        { 
         return {eon: { 'Temperature' : m.tN}} 
        } 
      }); 



</script>   

    </br> 
    <div class="outer"> 
     <div id="charttemp" class="inner"> </div> 
     <div id="charthumidity" class="inner"> </div> 
     <div id="chartlight" class="inner"> </div> 
    </div> 

</body> 

</html>

はCSSです：ここで起こって

.outer { 
    margin: 0 auto; 
    width:1500px; 
} 

.inner{ 
    display: table; 
    float: left; 
    width: 30%; 
}

出典

2016-09-23 Grenello

カップルの事：あなたのEON：

<head>

しかし、本当の問題内側にあなたのライブラリ参照を移動
コードは#charttempを参照していますが、まだレンダリングされていないのは、<div>がEONスクリプトの下にあり、なぜタブが必要なのですかフォーカスを失う/フォーカスを初めて取得するをレンダリングします。あなたの<div>をEONスクリプトの上に移動してください。

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
    <script type="text/javascript" src="http://pubnub.github.io/eon/v/eon/0.0.10/eon.js"></script> 
    <link type="text/css" rel="stylesheet" href="http://pubnub.github.io/eon/v/eon/0.0.10/eon.css"/> 
    <!-- <link rel="stylesheet" type="text/css" href="poolstyle.css"> --> 
</head> 

<body> 
<div class="outer"> 
    <div id="charttemp" class="inner"> </div> 
    <div id="charthumidity" class="inner"> </div> 
    <div id="chartlight" class="inner"> </div> 
</div> 

    <script type="text/javascript"> 
     var pubnub = PUBNUB.init ({ 
      publish_key: 'pubkey', subscribe_key: 'subkey', 
      error: function (error) {console.log('Error: ', error)}}); 

     var GraphChannel = "a"; 
     var h = true; 

     charttemp = eon.chart({ 
      pubnub: pubnub, 
      channel: GraphChannel, 
      limit: 1440, 
      history: h, 
      flow: true, 
      generate: { 
       bindto: "#charttemp", 
       data: { colors : {}, type: "spline"}, 
       transition: {duration: 250}, 
       axis: { x: {label: "Time", show: false}}, 
       grid: { x: {show: false}, y: {show: true}}, 
      }, 
      transform: function (m) 
      { 
       return {eon: { 'Temperature' : m.tN}} 
      } 
     }); 
    </script>   
</br> 
</body> 
</html>

出典

2016-09-23 21:31:59

チャームのように働いた。ありがとう。あなたはなぜグラフがフル1440ではなく+/- 100ポイントしか表示していないのかを示唆できますか？PN dbには多くのデータポイントがあります - – Grenello

EONチャートがページに表示されないload

答えて

関連する問題