未显示的flot图表中的勾标

Question

我有一页有四个象限的。每个象限都有一个表示保存报表中的数据的标记图。单击图表可将用户带到仪表板区域，在该区域可以看到更大版本的标记图、表格数据和UI控件以更改设置。所有这些都起作用了。

上周我升级到了0.8.3。突然，页面中带有象限的图表都丢失了它们的勾标。其他一切都很好:图表正确地绘制数据，当您单击图表以查看仪表板中的报表时，更大的flot图表工作得很好，包括滴答标签。

在这两个图表中，图表数据是相同的：

[
  {
     "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",
           "",
           ""
        ]
     ]
  }
]

选项非常相似，唯一的区别是在象限视图中关闭了与flot图的交互。

以下是象限视图的图表选项：

{
  "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"
}

我在console.log(axis)的第2184行的drawAxisLabels()中添加了一个jquery.flot.js，所有标签都被正确地添加到刻度数组中。他们根本没有在图表上渲染。

有什么想法吗？(如果您需要进一步的代码，请询问。我相信我已经包括了相关的部分，但是如果需要更多的话，我可以提供。)

编辑：，我创建了我网页的简化版。

Answer 1

在你的小提琴的第72行周围，你有这条线：

graphCanvas.removeClass('nodata').children('div').empty().remove();

这对应于获取占位符div中的第一个div并清空它。您正在清空的div包含轴标签。

这是一条线外的小提琴评语。