Как передать параметры с помощью canvas в функцию (создание веб-компонента)

Question

В настоящее время я работаю над веб-компонентами, и я только что создал один с chart.js, у меня он работает и отображается, но теперь я даже не знаю, с чего начать. Я хочу иметь возможность передавать параметры в свой холст, объявленный как:

ctx.htmlItem.html('<div><canvas id="myChart1" height="400" width="800" style="width:800px;height:400px;"></canvas></div>');

Я хочу иметь возможность получить ярлык, похожий на: <webComponentName color="FFFFFF"size="s" value="80" label="Small" symbol="%" ></webComponentName>, чтобы иметь возможность построить его, просто записав данные в метку, чтобы мой пользователь мог легко работать с ним

данные, которые я хочу передать, похожи на это:

var dataBubble = {
                datasets: [
                    {
                        label: 'First Dataset',
                        data: [
                            {
                                x: 20,
                                y: 30,
                                r: 15
                            },
                            {
                                x: 40,
                                y: 10,
                                r: 10
                            }
                        ],
                        backgroundColor: "#FF6384",
                        hoverBackgroundColor: "#FF6384",
                    }]
            };
            var optionsBubble = {
                elements: {
                    points: {
                        borderWidth: 1,
                        borderColor: 'rgb(0, 0, 0)'
                    }
                }
            }

Полный код из моей сети, который отображает веб-компонент, если он помогает:

flexygo.ui.wc.flxChart = function () {

    return {
        htmlItem: null,

        moduleId: null,
        canvas2:null,

        refresh: function () {

            this.init();

        },



        init: function () {
            var ctx = this;

            ctx.htmlItem.html('<div><canvas id="myChart2" height="400" width="800" style="width:800px;height:400px;"></canvas></div>');

            ctx.render();

        },
        render: function(){
            var ctx2 = document.getElementById("myChart2");
            var dataBubble = {
                datasets: [
                    {
                        label: 'First Dataset',
                        data: [
                            {
                                x: 20,
                                y: 30,
                                r: 15
                            },
                            {
                                x: 40,
                                y: 10,
                                r: 10
                            }
                        ],
                        backgroundColor: "#FF6384",
                        hoverBackgroundColor: "#FF6384",
                    }]
            };
            var optionsBubble = {
                elements: {
                    points: {
                        borderWidth: 1,
                        borderColor: 'rgb(0, 0, 0)'
                    }
                }
            }
            var myBubbleChart = new Chart(ctx2,{
                type: 'bubble',
                data: dataBubble,
                options: optionsBubble
            });
}

Я новичок в веб-дизайне и, возможно, есть лучший способ передать параметры в функцию, которая делает это холстом, так что не стесняйтесь исправлять, оценит его

Answer 1

Я наконец получил это с

if (ctx.htmlItem.attr('color') && ctx.htmlItem.attr('color') != '') {
                var color = ctx.htmlItem.attr('color');}

который проверяет это от вызова веб-компонента