0
我想爲可變數量的可跟蹤對象創建可變數量跟蹤器的flot圖表。我的代碼似乎工作到目前爲止,但我注意到2個異常。如何動態創建Flot JS的數據集?
如果以下值超過1: 「var trackerList = [」a「,」b「,」c「,」d「,」e「];」 它只顯示數組中的最後一個值。
如果超過1的值爲: var registeredTrackableObjects = [「a」,「b」,「c」,「d」]; 它什麼也沒有顯示。
我見過幾個例子,所以我想我的代碼應該工作,我錯過了什麼? 雖然我在上面,但是最好的方法是每秒更新一次圖表,最好的方法是什麼?我想用我的java代碼中的實際數據交換測試值的東西。
謝謝。
<script type="text/javascript">
$(document).ready(function()
{ \t
\t //Test values
\t var intensity = 5;
\t var trackerList = ["a", "b", "c", "d", "e"];
\t var registeredTrackableObjects = ["a", "b", "c", "d"];
\t
\t
\t var xDistance = 1.05;//Distance between bars
\t var yMin = 0;
\t var yMax = 20;
\t var xMin = 0;
\t var xMax = 10;
\t var data = [];//Flot JS format, which contains pairs of {label, array}
\t var customBarArray = [];
\t var customBar = [];
\t //Create a data set for every TO
\t for(i = 0; i<registeredTrackableObjects.length; i++)
\t {
\t \t //Create 1 bar for every tracker
\t \t customBar = [];
\t \t
\t \t for(j = 0; j<trackerList.length; j++)
\t \t {
\t \t \t customBar[j] = j;
\t \t \t customBar.push([xDistance * j, intensity]);
\t \t }
\t \t
\t \t customBarArray.push(customBar);
\t \t var name = "Beacon: " + i;
\t \t data.push({label: name, data: customBarArray[i]});
\t \t xDistance += 1.05;
\t }
$.plot($("#placeholder"), data,
{
series: {
bars: {
show: true,
barWidth: 0.1,
lineWidth: 0,
order: 1,
fillColor: {
colors: [{
opacity: 1
}, {
opacity: 0.7
}]
}
}
},
xaxis: {
mode: "time",
min: xMin,
max: xMax,
tickLength: 0,
tickSize: [1, "month"],
axisLabel: 'Month',
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 10,
axisLabelFontFamily: 'Verdana, Arial, Helvetica, Tahoma, sans-serif',
axisLabelPadding: 1
},
yaxis: {
min: yMin,
max: yMax,
axisLabel: 'Value',
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 10,
axisLabelFontFamily: 'Verdana, Arial, Helvetica, Tahoma, sans-serif',
axisLabelPadding: 5
},
legend: {
backgroundColor: "#EEE",
labelBoxBorderColor: "none"
},
colors: ["#AA4643", "#89A54E", "#4572A7"]
});
});
</script>