Question

我正在尝试在WSO2 DAS仪表板中创建自定义小工具。我已经创建了它。我可以将它拖放到仪表板设计器的容器中，当我向表中添加新数据时，我可以看到它正在移动（小工具是一个显示DAS表中引入的最新值的指标）。

问题是，当我点击＆＃34;查看＆＃34;时，小工具会从容器中消失。如果我重新打开页面的设计视图，则该小工具不再存在。如果我打开Chrome开发者控制台，我会收到错误消息＆＃34;绘制未定义＆＃34;。据我所知，你必须定义这个＆＃34; draw＆＃34;函数，以便页面可以在运行时呈现图形。

但是，在其他已经创建的小工具中，这个函数使用wso2gadgets.js函数和某种包装器来使用VIZGrammar，但是你真的只限于几种类型的小工具（线条，条形图，饼图，数字等）还有一两个），我们想用d3创建更好，更复杂的图形和小工具。

可悲的是，＆＃34;创建自定义小工具＆＃34;记录真的很差，即使你在这里按照WSO2教程https://docs.wso2.com/display/DAS310/Manually+Creating+a+Custom+Gadget，当你点击＆＃34;查看＆＃34;

时，它也不起作用。

我在下面发布了我的gadget.xml的代码。

谢谢大家

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="Gauge" description="This is a template gadget">
    <Require feature="dynamic-height"/>
    <Require feature="wso2-gadgets-identity"/>
</ModulePrefs>

<UserPref name="windowSize"
          display_name="Window Size"
          default_value="10"/>

<Content type="html">
    <![CDATA[   
        <head>

        <meta charset="utf-8">
        <style>
        .label{
            font-size:22.5px;
            fill:#ffffff;
            text-anchor:middle;
            alignment-baseline:middle;
            }
        .face{
            stroke:#c8c8c8;
            stroke-width:2;
        }
        .minorTicks{
            stroke-width:2;
            stroke:white;
        }
        .majorTicks{
            stroke:white;
            stroke-width:3;
        }           
        </style>

        <svg width="400" height="400"></svg>
        <link href="/portal/libs/analytics-wso2-2.0.0/common.css" rel="stylesheet" type="text/css" >
        <script src="/portal/libs/jquery_1.11.0/jquery-1.11.3.min.js"></script>
        <script src="js/provider-libs/ws-client.js"></script>
        <script src="http://vizjs.org/viz.v1.0.0.min.js"></script>
        <script src="/portal/libs/analytics-wso2-2.0.0/d3.min.js"></script>
        <script src="/portal/libs/analytics-wso2-2.0.0/vega.js"></script>
        <script src="/portal/libs/analytics-wso2-2.0.0/VizGrammar.min.js"></script>
        <script src="/portal/libs/analytics-wso2-2.0.0/wso2gadgets.js"></script>
        <script src="/portal/libs/analytics-wso2-2.0.0/chart-utils.js"></script>
        <script src="/portal/js/carbon-analytics.js"></script>
        <script src="js/core/provider-client.js"></script>
        <script src="js/core/gadget-util.js"></script>
        <script src="js/core/gadget-core.js"></script>

        <script>
                var username = "********";
                var password = "********";
                var server_url = "https://localhost:9445/portal/apis/analytics";
                var client = new AnalyticsClient().init(username,password,server_url);

                var svg=d3.select("svg");
                var g=svg.append("g").attr("transform","translate(200,200)");
                var domain = [0,100];

                var gg = viz.gg()
                .domain(domain)
                .outerRadius(150)
                .innerRadius(30)
                .value(0.5*(domain[1]+domain[0]))
                .duration(1000);

                gg.defs(svg);
                g.call(gg);  

                var queryInfo = {
                    tableName : "ROBICON_DEBUG_GENERAL_COMPLETO", //table being queried
                    searchParams : {
                        query : "*:*", //lucene query to search the records
                        start : 0, //starting index of the matching record set
                        count : 100,
                        sortBy:
                        [
                        {
                            field: "Timestamp",
                            sortType: "DESC"
                        }
                        ]
                    }
                };

                d3.select(self.frameElement).style("height", "400px");
                setInterval( 
                    function(){
                        client.tableExists("ROBICON_DEBUG_GENERAL_COMPLETO", function(data) {
                            console.log (data["message"]);
                            client.search(queryInfo, function(data) {
                                var datos = JSON.parse(data["message"]);
                                console.log (datos[0].values.LineSide_Voltage); 
                                var LSV = datos[0].values.LineSide_Voltage;
                                gg.setNeedle(parseFloat(LSV).toFixed(2));
                            }, function(error) {
                                console.log("error occured: " + error);
                                gg.setNeedle(domain[0]+Math.random()*(domain[1]-domain[0]));
                            });
                        }, function(error) {
                            console.log("error occured: " + error); 
                        });
                        },30000);
        </script>

        </head>
        <body>
            <div id="canvas"></div>
        </body>
    ]]>
</Content>
</Module>

Answer 1

如果您的要求是编写自定义小工具，则除非您在量表小工具中使用它们，否则不需要包含任何带脚本标记的库。 WSO2 DAS能够呈现在google open social spec

之后编写的任何小工具

因此，您可以尝试尝试从下面删除未使用的脚本标记。

{{1}}

WSO2 DAS仪表板 - 创建自定义小工具

1 个答案: