我的目标是创建一个简单的 JavaScript 实时串行图表，该图表使用芒果自动化数据点获取其数据。
我对数据点本身没有任何问题，但是尝试将图表链接到数据点是一件很痛苦的事情。我尝试使用两种不同的教程 (\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>