在頁面加載時不顯示EON圖表

我有一個工作的EON圖表，在初始頁面加載時不顯示，導致空白頁面。如果我切換到另一個瀏覽器選項卡，然後直接返回到圖形選項卡，則會顯示圖形。在頁面加載時不顯示EON圖表

這是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

兩件事情會在這裏：

移動你的庫引用到<head>標籤
，但真正的問題裏面：你EON代碼引用#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

工作就像一個魅力。謝謝。你能建議爲什麼圖表只顯示+/- 100點而不是完整的1440點 - PN數據庫中有很多數據點 - （每分鐘讀一個） – Grenello

在頁面加載時不顯示EON圖表

回答

相關問題