Chart js, Canvas 为空聚合物项目

Question

我正在从事一个聚合物项目，但仍在寻找解决办法。我正在尝试使用图表 js 并尝试了多种方法并在网上查找了其他问题，但没有任何帮助，所以我不得不寻求一些指导或在哪里可以解决我的问题。

这是我正在处理的聚合物项目，我正在处理的 html 文件具有以下结构：

<link rel="import" href="../bower_components/iron-list/iron-list.html">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script>



<dom-module id="sensors-app">
    <template>
        <style>
        </style>
        <div>
            <canvas id="chart"></canvas>
        </div>

        <app-header-layout fullbleed>
            </app-header>

            <iron-list onload="myFunction()" id="list" items="[[sensorDataModel]]" as="item" scroll-target="document">
                <template>
                    <div>
                    </div>
                </template>
            </iron-list>

        </app-header-layout>

    </template>

    <script>
       var ctx = document.getElementById("chart").getContext("2d");

        class SensorsApp extends Polymer.Element {

            static get is() { return 'sensors-app'; }

            static get properties() {
                return {
                    sensorDataModel: {
                        type: Array,
                        value: [],
                    }
                };
            }

            // rest of the code
        }

        window.customElements.define(SensorsApp.is, SensorsApp);
    </script>
</dom-module>

这是一个学校项目，我试图了解是否发生了错误，因为我将 canvas 放在了错误的位置或其他我不理解的地方。任何帮助将不胜感激。我删除了代码但保留了结构，因为如果不这样做，post 会非常冗长。如果我问的是一个愚蠢的问题，我很抱歉，我大部分时间都在后端工作，这是突然出现的，只是想学习，我在这么短的时间内几乎无法解决 javascript，我希望我可以得到一些想法我做错了什么 canvas 总是空的。这是我得到的错误：

sensors-app.html:142 Uncaught TypeError: Cannot read property 'getContext' of null

Answer 1

可以在polymer的ready方法中获取元素class，这样在调用ready的时候，元素已经定义好，不会为null。您可以使用以下代码

  class SensorsApp extends Polymer.Element {


    ready(){
    super.ready();
    var ctx = this.shadowRoot.querySelector("#chart").getContext("2d");
    }
    }

Chart js, Canvas 为空聚合物项目

Chart js, Canvas is null polymer project

javascript

canvas

polymer

chart.js