EON 图表在页面加载时不可见

Question

我有一个有效的 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%;
}

Answer 1

这里发生了一些事情：

将您的库引用移动到 <head> 标签内
但真正的问题是：您的 EON 代码正在引用 #charttemp 但它尚未呈现，因为 <div> 在 EON 脚本下方，这就是为什么它需要一个选项卡 lose focus/gain focus 第一次渲染。所以只需将 <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>

EON 图表在页面加载时不可见

EON Chart not visible on page load

html

javascript

pubnub