Диаграмма JS, Canvas - нулевой полимерный проект - PullRequest
Новая
       4

Диаграмма JS, Canvas - нулевой полимерный проект

0 голосов
/ 28 февраля 2019

Я работаю над проектом полимера и все еще придумываю свой путь.Я пытаюсь использовать диаграмму 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 неправильноместо или что-то еще, что я не понимаю.Любая помощь будет высоко оценена.Я удалил код, но сохранил структуру, потому что иначе было бы слишком долго размещать здесь.Мне очень жаль, если я задаю глупый вопрос, я работал в основном с бэкэндом, и это произошло неожиданно и просто хочу учиться, я с трудом справлялся с javascript за такое короткое время, я надеюсь, что смогу получить некоторые идеичто я делаю не так, что холст всегда нулевой.Это ошибка, кстати, я получаю: 

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

1 Ответ

0 голосов
/ 28 февраля 2019

Вы можете получить элемент в готовом методе класса полимера, чтобы к моменту вызова готовности был определен элемент, и он не будет нулевым.Вы можете использовать ниже код 

  class SensorsApp extends Polymer.Element {


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