Question

我目前正在研究Web组件，我刚刚创建了一个带有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');}

从Web组件调用中检查它

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

1 个答案: