所以我不知道是否有其他人经历过这种情况。
我正在使用nvd3创建一些行图表。如果useInteractiveGuideline为true,当我将鼠标悬停在线条上时,小工具提示会按原样显示,但不知何故,它会因某些轴刻度而混乱,导致它们消失或无法正确显示。
这只是放大/缩小,向上/向下滚动以恢复刻度的问题。
我只是在nvd3实时代码网站中使用javascript代码。
nv.addGraph(function() {
var chart = nv.models.lineChart()
.useInteractiveGuideline(true)
;
chart.xAxis
.axisLabel('Time (ms)')
.tickFormat(d3.format(',r'))
;
chart.yAxis
.axisLabel('Voltage (v)')
.tickFormat(d3.format('.02f'))
;
d3.select('#chart svg')
.datum(data)
.transition().duration(500)
.call(chart)
;
nv.utils.windowResize(chart.update);
return chart;
});
和数据:
[
{
"values": [
{
"x": 1347663600,
"y": 1.2790000438690186
},
{
"x": 1350255600,
"y": 1.2717000246047974
},
{
"x": 1352937600,
"y": 1.262649953365326
},
{
"x": 1355529600,
"y": 1.287500023841858
},
{
"x": 1358208000,
"y": 1.2908499836921692
},
{
"x": 1360886400,
"y": 1.267799973487854
},
{
"x": 1363305600,
"y": 1.350600004196167
},
{
"x": 1365980400,
"y": 1.3437999486923218
},
{
"x": 1368572400,
"y": 1.343999981880188
},
{
"x": 1371250800,
"y": 1.344099998474121
},
{
"x": 1373842800,
"y": 1.3225199580192566
},
{
"x": 1376521200,
"y": 1.3444000482559204
},
{
"x": 1379199600,
"y": 1.3273500204086304
},
{
"x": 1381791600,
"y": 1.3446999788284302
},
{
"x": 1384473600,
"y": 1.347499966621399
},
{
"x": 1387065600,
"y": 1.3476499915122986
},
{
"x": 1389744000,
"y": 1.350600004196167
},
{
"x": 1392422400,
"y": 1.3508000373840332
},
{
"x": 1394841600,
"y": 1.3692998886108398
},
{
"x": 1397516400,
"y": 1.381890058517456
},
{
"x": 1400108400,
"y": 1.3828500509262085
},
{
"x": 1402786800,
"y": 1.4433000087738037
}
],
"key": "Median Senior OC",
"color": "#f9b800"
},
{
"values": [
{
"x": 1347663600,
"y": 1.149999976158142
},
{
"x": 1350255600,
"y": 1.149999976158142
},
{
"x": 1352937600,
"y": 1.149999976158142
},
{
"x": 1355529600,
"y": 1.1430000066757202
},
{
"x": 1358208000,
"y": 1.149999976158142
},
{
"x": 1360886400,
"y": 1.149999976158142
},
{
"x": 1363305600,
"y": 1.1459999680519104
},
{
"x": 1365980400,
"y": 1.149999976158142
},
{
"x": 1368572400,
"y": 1.149999976158142
},
{
"x": 1371250800,
"y": 1.149999976158142
},
{
"x": 1373842800,
"y": 1.149999976158142
},
{
"x": 1376521200,
"y": 1.149999976158142
},
{
"x": 1379199600,
"y": 1.1509999632835388
},
{
"x": 1381791600,
"y": 1.149999976158142
},
{
"x": 1384473600,
"y": 1.1509999632835388
},
{
"x": 1387065600,
"y": 1.149999976158142
},
{
"x": 1389744000,
"y": 1.149999976158142
},
{
"x": 1392422400,
"y": 1.149999976158142
},
{
"x": 1394841600,
"y": 1.149999976158142
},
{
"x": 1397516400,
"y": 1.149999976158142
},
{
"x": 1400108400,
"y": 1.149999976158142
},
{
"x": 1402786800,
"y": 1.149999976158142
}
],
"key": "Median Trigger",
"color": "#34418f"
}
]
我抱歉没有放一个jsfiddle,但是代码和它完全相同
http://nvd3.org/livecode。唯一的区别是代替.datum(data())
我有.datum(data)
。
谢谢