Пользовательский тег шаблона элемента не отображает элемент тега canvas

Question

Пользовательский тег шаблона элемента не отображает элемент тега canvas

попробуйте следующее:

function totalActualSale (recordId) {

Record.aggregate([
    {  
      $match : {
        '_id':new mongoose.mongo.ObjectId(recordId),
      }
    },
    {
        $unwind:  { "path": '$SalesList'}
    },
    { $group:
        {_id:
            {
                item:"$SalesList.item",
            },
            pqty: { $sum: '$SalesList.pqty' },
        }
    },
    ], function (err, purc) {

        console.log("\nStock:"+ JSON.stringify(purc));


});
}

2

web-component custom-element javascript

задан Supersharp 27 January 2019 в 22:18

1 ответ

Другие вопросы по тегам:

web-component custom-element javascript

Похожие вопросы:

score 0 · Answer 1

По умолчанию display стиль CCS пользовательского элемента - inline.

Вы должны сделать его block или inline-block, и вы увидите <canvas> внутри вашего пользовательского элемента.

<style>
    canvas { border: 1px solid black }
    bar-chart { border: 1px solid red ; display: block }
</style>

class BarChart extends HTMLElement {
  connectedCallback() {
    let templateEl = document.getElementById("id_bar-chart_template");
    this.append(templateEl.content.cloneNode(true));
    let ctx = this.querySelector("#id_bar-chart_inside_template");
        new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
            datasets: [
                {
                    label: "Population (millions)",
                    backgroundColor: ["#3e95cd", "#8e5ea2", "#3cba9f", "#e8c3b9", "#c45850"],
                    data: [2478, 5267, 734, 784, 433]
                }
            ]
        },
        options: {
            legend: {display: false},
            title: {
                display: true,
                text: 'Predicted world population (millions) in 2050'
            }
        }
    });
  }
}
customElements.define("bar-chart", BarChart);

canvas { border: 1px solid black }
bar-chart { border: 1px solid red ; display: inline-block }

<script src=https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js></script>
<div class="container">
    <div class="row">
        <div class="col-12">
            <h1>Products and brands of vendors</h1>
            <bar-chart data-url="">
            </bar-chart>
        </div>
    </div>
</div>
<template id="id_bar-chart_template">
    <canvas id="id_bar-chart_inside_template"></canvas>
    <h3>Inside template</h3>
</template>