如何为 Flot JS 动态创建数据集
How to dynamically create a data set for Flot JS?
我想为可变数量的跟踪器创建一个具有可变数量的可跟踪对象的手图。到目前为止,我的代码似乎有效,但我注意到 2 个异常。
如果 中的值超过 1 个:"var trackerList = ["a", "b", "c", "d", "e"];"它仅显示数组中的最后一个值。
如果 中的值超过 1 个:var registerTrackableObjects = ["a", "b", "c", "d"];它什么也没显示。
我已经看过几个例子,所以我想我的代码应该可以工作,我错过了什么?当我在上面时,每秒更新一次该图表的最佳方法是什么?我想用我的 java 代码中的实际数据交换测试值的东西。
谢谢。
<script type="text/javascript">
$(document).ready(function ()
{
//Test values
var intensity = 5;
var trackerList = ["a", "b", "c", "d", "e"];
var registeredTrackableObjects = ["a", "b", "c", "d"];
var xDistance = 1.05;//Distance between bars
var yMin = 0;
var yMax = 20;
var xMin = 0;
var xMax = 10;
var data = [];//Flot JS format, which contains pairs of {label, array}
var customBarArray = [];
var customBar = [];
//Create a data set for every TO
for(i = 0; i<registeredTrackableObjects.length; i++)
{
//Create 1 bar for every tracker
customBar = [];
for(j = 0; j<trackerList.length; j++)
{
customBar[j] = j;
customBar.push([xDistance * j, intensity]);
}
customBarArray.push(customBar);
var name = "Beacon: " + i;
data.push({label: name, data: customBarArray[i]});
xDistance += 1.05;
}
$.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>
我现在自己修复了它。只需删除customBar[j] = j;
它就会起作用。
相关文章:
- onkeyup无法动态创建多个文本区域
- 如何使用javascript从主svg对象动态创建svg视图框
- 在动态创建的元素上获取对特定选择器的引用
- JQuery对动态创建的对象进行选择
- 使用jquery动态创建ul-li
- 从动态创建的html选择中选择所选选项
- 如何在动态创建的节点上绑定函数
- 动态创建OnClick事件Javascript
- 谷歌地图动态创建的标记点击事件使用相同的标记
- 在动态创建的标记上添加事件
- 动态创建一个javascript/jquery多级数组
- 如何动态创建许多Jquery颜色选择器(eyecon)
- 如何为动态创建的文本区域中输入的值更新ng模型
- 对动态创建的元素运行jQuery.ech()
- 使用jQuery访问动态创建的项
- 动态创建的iframe中的window.onerror在lne 0处给出脚本错误
- 当用户点击动态创建的链接时,如何调用JS方法.JQuery,ASP.NET MVC
- 我想将链接关联到动态创建的p元素上的相应文章
- AngularJs从列表中动态创建指令
- 使用javascript动态创建html内容/元素