谷歌图表不显示 [英] google-chart not displaying

问题描述

我正在尝试使用聚合物组分，但它不显示。元素在那里。我可以在检查员中看到它，但它不显示。也没有任何错误消息不起作用。我试图在聚合物文档中重新创建demo.html，并再次没有显示。是否存在与Google图表元素有关的问题？

 < dom-module id =stats-page> 
 
< style> 
代码{
颜色：＃007000; 
} 
 google-chart {
 height：300px; 
 width：400px; 
} 
＃selection-demo {
 position：relative; 
 height：300px; 
} 
＃selection-chart {
 float：left; 
} 
＃selection-display {
 display：inline-block; 
职位：亲属; 
 top：50％; 
} 
< / style> 
 
< template> 
 <！ - 您元素的本地DOM  - > 
<节> 
< h1> Stastistics Page< / h1> 
 
< p>以下是条形图：< / p> 
 
  type ='bar'
 options ='{title：一个月中的天数}'
 cols ='[ {label：Month，type：string}，{label：Days，type：number}]'
 rows ='[[Jan， 31，[Feb，28]，[Mar，31]，[Apr，30]，[May，31]，[Jun，30]]' 
< / google-chart> 
 
 
 <！ - 每个类别选择的点击率饼图 - > 
< h3>按类别点击< / h3> 
 
< div id =category-piechart> 
  id =选择图表
选项='{title：每个类别的点击次数}'
 cols = '[{label：Category，type：string}，{label：Clicks，type：number}]'
 rows ='[[Health ，31，[乔布斯，28]，[服务，31]，[购物，30]，[财经，31]，[社交媒体，30]]'> 
< / google-chart> 
 
< / div> 
<！ - 每个类别选择的点击饼图结束 - > 
 
 <！ -  Cicks and Logins over Time  - > 
< h3>登入< / h3> 
 
< div id =clicksovertime-line> 
  options ='{title：用户登录时间}'
 cols ='[{label：Hour ，type：string}，{label：Logins，type：number}]'
 rows ='[[00，1]，[01， 0]，[02，00]，[03，02]，[04，04]，[05，06]]'> 
< / google-chart> 
< / div> 
<！ - 随着时间的推移和登录结束 - > 
 
< / section> 
 
< / template> 
 
< / dom-module> 
< script> 
 //元素注册
聚合物（{
是：'stats-page'，
}）; 
  

解决方案

尝试在前两个之间添加空格 [[]

rows ='[[Jan，31]，[Feb，28] ，[Mar，31]，[Apr，30]，[May，31]，[Jun，30]]

b $ b

猜猜聚合物必须认为它是有约束力的。 ：）

I am trying to use the polymer component but it is not displaying. The element is there. I can see it in the inspector but it just does not display. There are also no error messages which does not help. I have tried to recreate the demo.html in the polymer docs and again nothing showing. Are there issues with the goole-chart element?

<dom-module id="stats-page">

    <style>
    code {
      color: #007000;
    }
    google-chart {
      height: 300px;
      width: 400px;
    }
    #selection-demo {
      position: relative;
      height: 300px;
    }
    #selection-chart {
      float: left;
    }
    #selection-display {
      display: inline-block;
      position: relative;
      top: 50%;
    }
  </style>

    <template>
        <!-- local DOM for your element -->
        <section>
            <h1>Stastistics Page</h1>

              <p>Here's a bar chart:</p>

              <google-chart
                type='bar'
                options='{"title": "Days in a month"}'
                cols='[{"label": "Month", "type": "string"},{"label": "Days", "type": "number"}]'
                rows='[["Jan", 31],["Feb", 28],["Mar", 31],["Apr", 30],["May", 31],["Jun", 30]]'>
              </google-chart>


            <!-- Pie Chart of Clicks per Category Selection  -->
            <h3>Clicks Per Category</h3>

            <div id="category-piechart">
                <google-chart   type="pie" 
                                id="selection-chart" 
                                options='{"title": "Clicks per Category"}' 
                                cols='[{"label": "Category", "type": "string"},{"label": "Clicks", "type": "number"}]' 
                                rows='[["Health", 31],["Jobs", 28],["Services", 31],["Shopping", 30],["Finance", 31],["Social Media", 30]]'>
                </google-chart>

            </div>
            <!-- End of Pie Chart of Clicks per Category Selection  -->

            <!-- Cicks and Logins over Time  -->
            <h3>Logins</h3>

            <div id="clicksovertime-line">
                <google-chart   type='line' 
                                options='{"title": "When do Users Login"}' 
                                cols='[{"label": "Hour", "type": "string"},{"label": "Logins", "type": "number"}]' 
                                rows='[["00", 1],["01", 0],["02", 00],["03", 02],["04", 04],["05", 06]]'>
                </google-chart>
            </div>
            <!-- End of Cicks and Logins over Time   -->

        </section>

    </template>

</dom-module>
<script>
    // element registration
    Polymer({
        is: 'stats-page',
    });

解决方案

This one caught me too a while ago.

Try adding a space in between the first two [[.

rows='[ ["Jan", 31],["Feb", 28],["Mar", 31],["Apr", 30],["May", 31],["Jun", 30]]'

Guess Polymer must think it's for binding. :)

这篇关于谷歌图表不显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！