如何为 Flot JS 动态创建数据集

How to dynamically create a data set for Flot JS?

本文关键字:动态 创建 数据集 JS Flot      更新时间:2023-09-26

我想为可变数量的跟踪器创建一个具有可变数量的可跟踪对象的手图。到目前为止,我的代码似乎有效,但我注意到 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;它就会起作用。