谷歌图表不显示

时间:2015-08-11 10:22:48

标签: javascript google-visualization polymer

我正在尝试使用聚合物组件,但它没有显示。元素就在那里。我可以在检查器中看到它,但它只是不显示。也没有错误消息没有帮助。我试图在聚合物文档中重新创建demo.html,并且没有显示任何内容。 goole-chart元素是否存在问题?

<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',
    });

1 个答案:

答案 0 :(得分:9)

这个人很久以前就抓住了我。

尝试在前两个.projectsimageswrap { margin:0 auto; background-color: rgb(247,200,198); position: absolute; top: 100%; width:100%; } .projectsimageswrap .project { width:50%; padding-bottom:50%; margin:0; float:left; background:rgb(204,234,236); position: relative; } /*style for the briefs*/ #thebrief{ position: absolute; margin: auto; width: 300px; } 之间添加空间

[[

猜猜聚合物必须认为它具有约束力。 :)