个人中心
gpt4 book ai didi

javascript - Mango Automation 使用数据点创建序列图表

转载 作者：行者123 更新时间：2023-11-27 23:25:46 25 4
gpt4 key购买 nike

我的目标是创建一个简单的 javaScript 实时串行图表，使用 mango 自动化数据点获取其数据。

我对数据点本身没有任何问题，但尝试将图表链接到数据点确实很痛苦。我尝试使用两种不同类型的教程(\pointHierarchyExamples\realtimeSerialChart.shtm)和(\tutorials\dataPointChart.shtm)。

前一个示例似乎更实用，因为它给出了如何将数据点链接到图形的清晰示例，但不幸的是，即使示例页面本身也不起作用，因此我无法使用它。另一方面，后一个示例确实有效，但它有很多我不想要的东西(主要是时间和数据表示形式相关的小部件)，并且似乎很难删除和修改。首先，我希望能够仅创建图表，页面上没有其他小部件。另外我找不到任何文档

下面您将找到我遇到的问题以及我通过修改第二个示例设法创建的代码。我还在评论中添加了我的想法和问题。

第一个问题是，在创建图表时，MangoAPI 是创建图表的人，所以我在设计图表时没有完全的自由(Fe。我无法更改主题)。

第二个问题是，我无法在加载页面时显示图表，而只能在调用函数后显示图表。

第三个问题是我几乎找不到任何包含相关芒果类/函数的文档或示例。

TL:DR 我想找到一些关于这些 Mango 库的好文档。也欢迎任何其他帮助

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />

    <!-- Add the Mango Favicon -->
    <link rel="icon" href="/images/favicon.ico">

    <!-- Base Library -->
    <script type="text/javascript" src="/resources/loaderConfig.js"></script>
    <script type="text/javascript" src="/resources/require.js"></script>
    <script type="text/javascript" src="/resources/main.js"></script>

    <script type="text/javascript">

    var points = {}; //Map of xids to points where points['xid'] = point;

    //Import needed libraries

    require(['jquery', 'mango/api', 'mango/TimePresetPicker', 'mango/SerialChart',
             'mango/PointValueDataProvider', 'mango/ProviderOptionsManager', 'jquery.notify'],

    //Creating the main function
    function($, MangoAPI, TimePresetPicker, SerialChart, PointValueDataProvider,
            ProviderOptionsManager, point) {
            //Setting up the chart
        var chart = new SerialChart({
            divId: 'Graafi',
            amChart: {
                theme: "light", //Doesn't do anything
                chartScrollbar: {
                    enabled: true,
                    graph: 'DP_211607',
                    offset: 30,
                    oppositeAxis: false,
                    scrollbarHeight: 90
                },
                legend: {
                    align: 'center',
                },
                categoryAxis: {
                    minPeriod: 'ss'
                }
            }
        });

        //Creating the display on the page
        chart.createDisplay();

                    // create a point value data provider
        var dataProvider = new PointValueDataProvider(null, {
            // convert point values to their specified unit
            apiOptions: { converted: true }
        });

                    // setup the time picker with its inputs
        //The time picker requires all three elements  even if I didn't want to. In addition, I couldn't find anything to help me customize it
        var timePicker = new TimePresetPicker({
            presetPicker: $('#presetPicker') //Uses a drop down menu, but I'd rather like fever options that each had their own buttons. 
            //fromPicker: $('#fromPicker'), these can be deleted like I did, but their element will still be on the screen for some reason. And it looks dumb.
            //toPicker: $('#toPicker')
        });
        //The provider manager seems to be really rigid, because it requires timePicker or it won't work. In addition I couldn't find any documentation about how to use it
        var providerManager = new ProviderOptionsManager({ 
            errorFunction: MangoAPI.logError,
            timePicker: timePicker
        });

        // link the chart to the data provider
        dataProvider.addListener(chart);

        // link the provider to the provider manager
        providerManager.addProvider(dataProvider);

        $('#presetPicker').on('change', function() {
            // update the data provider
            dataProvider.addDataPoint(point);// These two lines are the ones that make the graph show on the screen. I would like to be able to do these when the page is loaded, but for some reason they only work when the value of an element is changed
            providerManager.refreshProviders();
        });
        function loadPoints() { 
            MangoAPI.defaultApi.queryPoints('limit(50)').then(function(results){ // I couldn't find any documentation about how to use this query function so I just copied the 'limit(50)' keyword and filtered out the one I wanted based on its XID
                for (var i=0; i<results.items.length; i++) {
                    var point = results.items[i];
                    if (point.xid === 'DP_211607') {
                        points[point.xid] = point;
                        dataProvider.addDataPoint(point); //these two lines of code should update the chart and view it, but for some reason it gives this error "TypeError: this.amChart.validateData is not a function"
                        providerManager.refreshProviders();
                        break;
                    };
                }
           }).fail(MangoAPI.logError);
        }
        loadPoints();

    });
</script>
</head>
<body>
    <div id="data">
        <header></header>
        <div id="Graafi"></div>
        <div class="input">
            <select id="presetPicker" class="form-control"></select>
        </div>
        <footer></footer>
    </div>
</body>

最佳答案

他们有很棒的 AP​​I 引用以及嵌入的大量演示。

http://YOUR_MANGO_HOST:PORT/mango-api-docs/index.shtm

https://help.infiniteautomation.com

您可以携带自己的代码和对象。 Mango 应用程序基于 jetty 构建，并且非常可配置。您必须获取一个点(虚拟或真实)注册更新(websocket 或 RESTful 查询)，然后将值插入您选择的图表中。您可以嵌入自己的库或使用任何 HTML5 组件进行绘制。该界面是一个剪切和粘贴的梦想，或者是一个完整的“自己动手”，支持 jquery 或 angularjs<2.0 编码。恕我直言，这是一个非常出色的软件。

希望这有帮助。

关于javascript - Mango Automation 使用数据点创建序列图表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34980806/

25 4 0
文章推荐： html - 如何查看 HTML 元素的基线？
文章推荐： javascript - 在 div 中滚动到顶部
文章推荐： python - 如何解析 html 表格元素中的文本
文章推荐： javascript - React HTMLtoJSX 不转换大括号
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com