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

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

转载作者：行者123 更新时间：2023-11-27 23:25:46

25

4

我的目标是创建一个简单的 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>

最佳答案

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

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 不转换大括号

MSSQL监控数据库的DDL操作(创建，修改，删除存储过程，创建，修改，删除表等)
前言：有时候，一个数据库有多个帐号，包括数据库管理员，开发人员，运维支撑人员等，可能有很多帐号都有比较大的权限，例如DDL操作权限(创建，修改，删除存储过程，创建，修改，删除表等），账户多了，管理
javascript - 使用 Storybook 创建 React App 创建 webpack 问题
所以我用 Create React App 创建并设置了一个大型 React 应用程序。最近我们开始使用 Storybook 来处理和创建组件。它很棒。但是，当我们尝试运行或构建应用程序时，我们不断遇
javascript - 创建 Angular Directive(指令)以重用代码 - 创建 html 时解析错误
遵循我正在创建的控件的代码片段。这个控件用在不同的地方，变量也不同。我正在尝试编写指令来清理代码，但在 {{}} 附近插入值时出现解析错误。刚接触 Angular ，无法确定我错过了什么。请帮忙。
java - 创建 JAX-RS 提供程序以从 InputStream 创建 Java Image
我正在尝试创建一个 image/jpeg jax-rs 提供程序类，它为我的基于 post rest 的 Web 服务创建一个图像。我无法制定请求来测试以下内容，最简单的测试方法是什么？ @POST
c - 当我使用 FILE 创建 txt 文件时，Dev C++ 创建 test.txt
我一直在 Windows 10 的模拟器中练习 c。后来我改用dev C++ IDE。当我在 C 中使用 FILE 时。创建的文件的名称为 test.txt ，而我给出了其他名称。请帮助解决它。下面
ios - 为什么我们不遵循使用 xib 创建 customTableViewCell 的相同过程，就像使用 xib 创建 customView 一样？
当我们创建自定义 View 时，我们将 View 文件的所有者设置为自定义类，并使用 initWithFrame 或 initWithCode 对其进行实例化。当我们创建 customUITable
创建 Pthreads
我正在尝试为函数 * Producer 创建一个线程，但用于创建线程的行显示错误。我为这句话加了星标，但我无法弄清楚它出了什么问题...... #include #include #include
创建、调用JavaScript对象的方法集锦
今天在做项目时，遇到了需要创建JavaScript对象的情况。所以Bing了一篇老外写的关于3种创建JavaScript对象的文章，看后跟着打了一遍代码。感觉方法挺好的，在这里与大家分享一下。 &
python - 创建 StringToSign
我正在阅读将查询字符串传递给 Amazon 的 S3 以进行身份验证的文档，但似乎无法理解 StringToSign 的创建和使用方式。我正在寻找一个具体示例来说明 (1) 如何构造 String
c# - 创建、不等待和确保任务完成的正确方法
前言:我对 C# 中任务的底层实现不太了解，只了解它们的用法。为我在下面屠宰的任何东西道歉: 对于“我怎样才能开始一项任务但不等待它？”这个问题，我找不到一个好的答案。在 C# 中。更具体地说，即使任
linq - 创建 ILookups
我有一个由一些复杂的表达式生成的 ILookup。假设这是按姓氏查找人。 (在我们简单的世界模型中，姓氏在家庭中是唯一的) ILookup families; 现在我有两个对如何构建感兴趣的查询。首
WIX bundle 创建
我试图创建一个 MSI，其中包含和 exe。在 WIX 中使用了捆绑选项。这样做时出错。有人可以帮我解决这个问题。下面是代码: 错误 error LGH
Yii 创建、更新具有不同字段的表单
在 Yii 中，Create 和 Update 通常使用相同的形式。因此，如果我在创建期间有电子邮件、密码、...other_fields...等字段，但我不想在更新期间专门显示电子邮件和密码字段，但
qt - 创建 QModelIndex
上周我一直在努力创建一个给定一行和一列的 QModelIndex。或者，我会满足于在已经存在的 QModelIndex 中更改 row() 的值。任何帮助，将不胜感激。编辑: QModelInd
C: 创建、传递和访问指向常量字符串的常量指针数组
出于某种原因，这不起作用: const char * str_reset_command = "\r\nReset"; const char * str_config_command = "\r\nC
r - 创建 "other"字段
现在，我有以下由 original.df %.% group_by(Category) %.% tally() %.% arrange(desc(n)) 创建的 data.frame。 DF 5),
vim - 创建〜/.vimrc后错误打开文件
在今天之前，我使用/etc/vim/vimrc来配置我的vim设置。今天，我想到了创建.vimrc文件。所以，我用 touch .vimrc cat /etc/vim/vimrc > .vimrc 所
iPhone:创建 MKAnnotation
我可以创建一个 MKAnnotation，还是只读的？我有坐标，但我发现使用 setCooperative 手动创建 MKAnnotation 并不容易。想法？最佳答案 MKAnnotation
iphone - 创建 NSDictionary
在以下代码中，第一个日志语句按预期显示小数，但第二个日志语句记录 NULL。我做错了什么？ NSDictionary *entry = [[NSDictionary alloc] initWithOb
php - 创建/添加多维数组值时的未定义偏移
我正在使用与此类似的代码动态添加到数组； $arrayF[$f+1][$y][$x+1] = $value+1; 但是我在错误报告中收到了这个: undefined offset :1 问题:尝试创

首页

博学

6Ren·AI

商城

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