如何将带有 canvas 的参数传递给函数（构建 Web 组件）

Question

我目前正在研究 Web 组件，我刚刚用 chart.js 创建了一个，我让它工作并显示了，但现在我什至不知道 start.I 想要能够将参数传递到我的 canvas，声明为：

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
            });
}

我是网页设计的新手，可能有更好的方法可以将参数传递给通过 canvas 完成的函数，所以请随时纠正，将不胜感激

Answer 1

我终于用

搞定了

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

从 Web 组件调用检查它

如何将带有 canvas 的参数传递给函数（构建 Web 组件）

How to pass parameters with a canvas to a function (building a web component)

html

javascript

canvas

web-component