Javascript 堆叠条形图与flot图重叠
需要帮助在flot图表中正确绘制堆叠条形图。不确定为什么我的条没有堆叠,我正在动态准备数据集。下面是我的数据格式Javascript 堆叠条形图与flot图重叠,javascript,css,angularjs,flot,flot.tooltip,Javascript,Css,Angularjs,Flot,Flot.tooltip,需要帮助在flot图表中正确绘制堆叠条形图。不确定为什么我的条没有堆叠,我正在动态准备数据集。下面是我的数据格式 [{ "data": [ [1415491200000, 1], [1415577600000, 2], [1415750400000, 1] ], "label": "MANG", "bars": { "show": "true", "barWidth"
[{
"data": [
[1415491200000, 1],
[1415577600000, 2],
[1415750400000, 1]
],
"label": "MANG",
"bars": {
"show": "true",
"barWidth": 36000000,
"fillColor": "#FFEE11",
"order": 1,
"align": "center"
},
"stack": true
}]
图表选项
{
xaxis: {
mode: "time",
timeformat: "%m/%d/%y",
minTickSize: [1, "day"]
},
grid: {
labelMargin: 10,
hoverable: true,
borderWidth: 0
},
series: {
stack: true
},
colors: colorCodes,
tooltip: true,
legend: {
show: true,
noColumns: 0, // number of colums in legend table
labelFormatter: null, // fn: string -> string
labelBoxBorderColor: "#888", // border color for the little label boxes
container: "#adoptionLegendContainer", // container (as jQuery object) to put legend in, null means default on top of graph
position: "nw", // position of default legend container within plot
margin: [5, 10], // distance from grid edge to default legend container within plot
backgroundOpacity: 0 // set to 0 to avoid background
}
}
请帮忙
注意:在2014年11月26日,有两个任务分别为2和3计数,因此基本上,条形图应该在yaxis中绘制到5,但它是重叠的。我在这个问题上花了很多时间,终于可以为您的所有问题找到一个后期解决方案 首先,您忘记在索引中包含
。这意味着堆叠图表并没有真正绘制出来。其次,我稍微清理了一下数据,删除了数据中不必要的双重声明。然后,我修复了在包含堆栈脚本后,鼠标悬停显示错误任务量的问题
最后,我试图找出flot重叠的原因,并得出以下结论:flot不知道如何处理长度可变的数据序列。这意味着,如果有3个数据序列,每个数据序列的长度不同,则条之间的相互重叠看起来是随机的。但是,如果确保所有系列的长度相同,则条堆叠不会出现问题
在我看来,最好的解决方案是在服务器端确保所有序列的长度相同,并且每个数据点都有一个值。理想情况下,您可以将零值添加到所有在数据刻度处缺少值的序列中,并确保所有序列的长度都相同
以下是我的解决方案的代码:
数据和选项:
显示我的解决方案的plnkr是我在这个问题上花了很多时间,终于可以为您的所有问题提供解决方案 首先,您忘记在索引中包含
。这意味着堆叠图表并没有真正绘制出来。其次,我稍微清理了一下数据,删除了数据中不必要的双重声明。然后,我修复了在包含堆栈脚本后,鼠标悬停显示错误任务量的问题
最后,我试图找出flot重叠的原因,并得出以下结论:flot不知道如何处理长度可变的数据序列。这意味着,如果有3个数据序列,每个数据序列的长度不同,则条之间的相互重叠看起来是随机的。但是,如果确保所有系列的长度相同,则条堆叠不会出现问题
在我看来,最好的解决方案是在服务器端确保所有序列的长度相同,并且每个数据点都有一个值。理想情况下,您可以将零值添加到所有在数据刻度处缺少值的序列中,并确保所有序列的长度都相同
以下是我的解决方案的代码:
数据和选项:
显示我的解决方案的plnkr是在谷歌代码上打开了一个报告,描述了问题和可能的修复:
在我的例子中,还需要对数据标记进行排序。有一份关于谷歌代码的报告,描述了问题和可能的修复:
在我的例子中,还需要对数据标记进行排序。不知道是否也需要添加该库。糟透了。不知道还需要添加那个库。真倒霉
$scope.tasksRunChartOptions = {
xaxis: {
mode: "time",
timeformat: "%m/%d/%y",
minTickSize: [1, "day"]
},
grid: {
labelMargin: 10,
hoverable: true,
borderWidth: 0
},
series: {
stack: true,
"bars":{
"show":"true",
"barWidth":36000000,
"order":1,
"align":"center"
}
},
colors: colorCodes,
tooltip: true,
legend: {
show: true,
noColumns: 0, // number of colums in legend table
labelFormatter: null, // fn: string -> string
labelBoxBorderColor: "#888", // border color for the little label boxes
container: "#adoptionLegendContainer", // container (as jQuery object) to put legend in, null means default on top of graph
position: "nw", // position of default legend container within plot
margin: [5, 10], // distance from grid edge to default legend container within plot
backgroundOpacity: 0 // set to 0 to avoid background
}
};
$scope.translate = function(value) {
var monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
var myDate = new Date(value);
return myDate.getDate() + " " + monthNames[myDate.getMonth()] + " " + myDate.getFullYear();
}
$scope.reportTasksRunRange = {
min: 1415059200000,
max: 1418342400000,
floor: 1415059200000,
ceil: 1418342400000,
step: (1412467200000 - 1412380800000)
};
$scope.tasksRunData = [
{
"data":
[[1415491200000,1],[1415577600000,3],[1415664000000,2],[1415750400000,1],[1415836800000,3],[1415923200000,1],[1416009600000,7],[1416096000000,2],[1416268800000,2],[1416441600000,1],[1416528000000,12],[1416787200000,1],[1416873600000,1],[1416960000000,3],[1417046400000,2],[1417132800000,2],[1417392000000,4],[1417478400000,3],[1417737600000,1],[1417910400000,4],[1417996800000,6],[1418083200000,2],[1418169600000,4],[1418256000000,3]],
"label":"ICS-MANG"
},
{
"data":
[[1415491200000,2],[1415577600000,3],[1415664000000,3],[1415750400000,1],[1415836800000,1],[1415923200000,2],[1416009600000,15],[1416096000000,4],[1416268800000,1],[1416441600000,3],[1416528000000,1],[1416787200000,1],[1416873600000,1],[1416960000000,3],[1417046400000,3],[1417132800000,2],[1417392000000,4],[1417478400000,3],[1417737600000,3],[1417910400000,1],[1417996800000,6],[1418083200000,5],[1418169600000,4],[1418256000000,3]],
"label":"Neeraj_secure"
},
{
"data":
[[1415491200000,2],[1415577600000,3],[1415664000000,3],[1415750400000,1],[1415836800000,1],[1415923200000,3],[1416009600000,1],[1416096000000,2],[1416268800000,4],[1416441600000,1],[1416528000000,1],[1416787200000,1],[1416873600000,1],[1416960000000,3],[1417046400000,4],[1417132800000,2],[1417392000000,4],[1417478400000,3],[1417737600000,7],[1417910400000,20],[1417996800000,6],[1418083200000,4],[1418169600000,4],[1418256000000,3]],
"label":"Bkrishna",
}];