【发布时间】：2014-06-03 15:27:52
【问题描述】：
我有一个有四个象限的页面。每个象限都有一个浮动图表，代表已保存报告中的数据。单击图表会将用户带到仪表板区域，在该区域可以看到更大版本的浮动图表、表格数据和用于更改设置的 UI 控件。所有这些都奏效了。
上周我升级到了 flot 0.8.3。突然，带有象限的页面中的图表都缺少它们的刻度标签。其他一切正常：图表正确绘制数据，当您单击图表查看仪表板中的报告时，较大的浮动图表完美运行，包括刻度标签。
在两个图表中，图表数据相同：
[
{
"color":"#1592ab",
"groupData":[
{
"type":"product",
"label":"8M MAX",
"splitTypeLegend":"Product"
}
],
"splitGroups":[
{
"splitType":"product",
"splitIdentifier":"677",
"splitLabel":"8M MAX"
}
],
"label":"8M MAX (1 units)",
"hoverable":true,
"data":[
[
1401494400000,
34.932668,
"1",
"2",
"",
""
],
[
1401580800000,
37.06447464,
"1",
"6",
"",
""
],
[
1401667200000,
37.21810664,
"1",
"6",
"",
""
],
[
1401753600000,
32.85324,
"1",
"1",
"",
""
]
]
},
{
"color":"#871010",
"groupData":[
{
"type":"product",
"label":"8M WBC",
"splitTypeLegend":"Product"
}
],
"splitGroups":[
{
"splitType":"product",
"splitIdentifier":"676",
"splitLabel":"8M WBC"
}
],
"label":"8M WBC (1 units)",
"hoverable":true,
"data":[
[
1401408000000,
35.485664,
"1",
"1",
"",
""
],
[
1401494400000,
34.92812,
"1",
"2",
"",
""
],
[
1401580800000,
37.436968,
"1",
"1",
"",
""
]
]
},
{
"color":"#21632f",
"groupData":[
{
"type":"product",
"label":"24M WBC",
"splitTypeLegend":"Product"
}
],
"splitGroups":[
{
"splitType":"product",
"splitIdentifier":"675",
"splitLabel":"24M WBC"
}
],
"label":"24M WBC (1 units)",
"hoverable":true,
"data":[
[
1401408000000,
36.67866,
"1",
"2",
"",
""
],
[
1401494400000,
33.975452,
"1",
"2",
"",
""
],
[
1401580800000,
36.545028,
"1",
"2",
"",
""
],
[
1401667200000,
37.554504,
"1",
"1",
"",
""
]
]
},
{
"color":"#cf8c19",
"groupData":[
{
"type":"product",
"label":"80M 20M FTTCWBC",
"splitTypeLegend":"Product"
}
],
"splitGroups":[
{
"splitType":"product",
"splitIdentifier":"678",
"splitLabel":"80M 20M FTTCWBC"
}
],
"label":"80M 20M FTTCWBC (1 units)",
"hoverable":true,
"data":[
[
1401408000000,
36.147816,
"1",
"1",
"",
""
],
[
1401494400000,
35.66955064,
"1",
"12",
"",
""
],
[
1401580800000,
37.06554,
"1",
"6",
"",
""
],
[
1401667200000,
36.92269864,
"1",
"6",
"",
""
],
[
1401753600000,
34.992038,
"1",
"4",
"",
""
]
]
},
{
"color":"#634b4b",
"groupData":[
{
"type":"product",
"label":"--Unassigned--",
"splitTypeLegend":"Product"
}
],
"splitGroups":[
{
"splitType":"product",
"splitIdentifier":"0",
"splitLabel":"--Unassigned--"
}
],
"label":"--Unassigned-- (1 units)",
"hoverable":true,
"data":[
[
1401580800000,
37.508096,
"1",
"1",
"",
""
],
[
1401753600000,
33.2178,
"1",
"1",
"",
""
]
]
}
]
选项非常相似，唯一的区别是在象限视图中关闭了与浮动图的交互。
以下是象限视图的图表选项：
{
"grid":{
"margin":{
"top":10,
"bottom":10,
"right":0,
"left":25
},
"markings":false
},
"legend":{
"labelBoxBorderColor":"#666666",
"noColumns":3,
"show":true,
"container":"#report0legend"
},
"series":{
"bars":{
"show":false
},
"lines":{
"show":true
},
"points":{
"radius":1.5,
"show":true
},
"shadowSize":0
},
"xaxis":{
"axisLabelFontFamily":"Arial",
"axisLabelFontSizePixels":12,
"dayNames":[
"Sunday",
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday"
],
"font":{
"size":12,
"family":"Arial",
"color":"#333"
},
"monthNames":[
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sept",
"Oct",
"Nov",
"Dec"
],
"timezone":"utc",
"axisLabel":null,
"labelAngle":-45,
"mode":"time",
"tickFormatter":null,
"tickSize":null,
"minTickSize":[
1,
"day"
],
"timeformat":"%d %b %Y"
},
"yaxis":{
"axisLabelFontFamily":"Arial",
"axisLabelFontSizePixels":12,
"font":{
"size":12,
"family":"Arial",
"color":"#333"
},
"autoscaleMargin":0.01,
"axisLabel":"HTTP MT Downstream (Mbps)",
"min":0,
"tickFormatter":null
},
"metricName":"HTTP MT Downstream",
"metricUnit":"Mbps",
"mode":"time"
}
对于仪表板视图：
{
"crosshair":{
"color":"#1592ab",
"mode":null
},
"grid":{
"hoverable":true,
"margin":{
"top":20,
"left":40,
"bottom":20,
"right":20
},
"markings":false,
"clickable":true,
"mouseActiveRadius":10
},
"legend":{
"noColumns":3,
"show":true,
"container":"#graph-legend",
"labelBoxBorderColor":"#666666"
},
"selection":{
"mode":"xy"
},
"series":{
"bars":{
"show":false
},
"lines":{
"show":true
},
"points":{
"show":true
},
"shadowSize":0
},
"xaxis":{
"axisLabelFontFamily":"Arial",
"axisLabelFontSizePixels":12,
"dayNames":[
"Sun",
"Mon",
"Tue",
"Wed",
"Thu",
"Fri",
"Sat"
],
"font":{
"size":12,
"family":"Arial",
"color":"#333"
},
"monthNames":[
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sept",
"Oct",
"Nov",
"Dec"
],
"timezone":"utc",
"axisLabel":"Day",
"labelAngle":-45,
"mode":"time",
"tickFormatter":null,
"tickSize":null,
"minTickSize":[
1,
"day"
],
"timeformat":"%d %b %Y"
},
"yaxis":{
"axisLabelFontFamily":"Arial",
"axisLabelFontSizePixels":12,
"font":{
"size":12,
"family":"Arial",
"color":"#333"
},
"axisLabel":"HTTP MT Downstream (Mbps)",
"autoscaleMargin":0.01,
"min":0,
"tickFormatter":null,
"ticks":20
},
"metricName":"HTTP MT Downstream",
"metricUnit":"Mbps",
"mode":"time"
}
我在 jquery.flot.js 的第 2184 行的 drawAxisLabels() 内添加了一个 console.log(axis)，并且所有标签都正确添加到刻度数组中。它们根本没有在图表上呈现。
有什么想法吗？ （如果您需要更多代码，请询问。我相信我已经包含了相关位，但如果需要更多我可以提供。）
【问题讨论】：
-
你能建立一个fiddle 来显示你的问题吗？或者更好的是两个带有新旧版本的浮动版本来显示差异。
-
第一个想法：
tickSize和tickformatter是null。尝试更改这些（默认不是null，请参阅documentation）。 -
@Raidri、
tickSize和tickFormatter在两个版本中都为 null，但刻度标签在仪表板视图中呈现。即使我消除了所有自定义选项，刻度也不会在象限视图中呈现。我想知道这是否是一些奇怪的 flot 错误。 -
这是一个快速的 jsFiddle (jsfiddle.net/N89E9/1) 与您的象限视图数据/选项。标签存在。占位符 div 的 HTML/CSS 是什么样的？
-
我正在创建一个复制问题的小提琴。我已经添加了精简的 html 和 css，但是（正如@Mark's fiddle 演示的那样），到目前为止没有问题。当我在小提琴中复制（或解决）问题时将在此处更新。