Вызов класса Js с использованием шаблона в JS, а не с использованием отдельного файла Html - PullRequest
Новая
       84

Вызов класса Js с использованием шаблона в JS, а не с использованием отдельного файла Html

1 голос
/ 11 июля 2020

У меня есть требование, когда мне нужно построить диаграмму с использованием теневого DOM. Прямо сейчас у меня есть файл HTML и файл javascript. Я создал настраиваемый элемент в файле Javascript, а затем вызываю пользовательский элемент из файла html. Я хочу вызвать пользовательский элемент из файла javascript. 

class ChartComponent extends HTMLElement {
    constructor() {
        super();
        this._shadowRoot = this.attachShadow({ 'mode': 'open' });
        this.chart = document.createElement('div');
        this.chart.id = 1337;
        this._shadowRoot.appendChild(this.chart);
    }

    connectedCallback() {
        let chart = new CanvasJS.Chart(this._shadowRoot.getElementById(this.chart.id), {
            title:{
              text: "Basic Column Chart"
            },
            data: [{                
              dataPoints: [
                { x: 10, y: 71 },
                { x: 20, y: 55},
                { x: 30, y: 50 },
                { x: 40, y: 65 },
                { x: 50, y: 95 },
                { x: 60, y: 68 },
                { x: 70, y: 28 },
                { x: 80, y: 34 },
                { x: 90, y: 14}
              ]
            }]
          });
        chart.render();
    }
}

window.customElements.define('my-chart', ChartComponent);
<my-chart style="height: 360px; width: 100%;"></my-chart>

Как можно создать элемент внутри файла JS и вызвать класс. Пожалуйста, предложите. Мой код Javascript будет вызываться JSON файл, который я загружу в SA C (облако SAP Analytics). Поэтому я хочу создать шаблон внутри JS и прикрепить диаграмму к этому шаблону.

...