我使用NVD3.js生成两种类型的图表。当我将鼠标悬停在图表上时,第一种类型的图表会正确显示鼠标光标右侧的工具提示。
在折线图的正下方,我有一个堆积条形图,其代码显示如下。对于我悬停在栏上的所有地方,我看到一个位于光标左侧的工具提示,它与折线图上的工具提示不一致。
如何将工具提示的默认位置更改为靠近光标?
以下是我尝试的内容
修改了css规则,无意中将折线图上的工具提示改为副作用。
.nvtooltip.xy-tooltip
{
width: 170px;
position: absolute;
}
用于生成堆积条形图的代码...
var dataAging = [{
"values" : [{
"y" : 13,
"x" : "Closed On Time"
}, {
"y" : 0,
"x" : "Closed Late"
}],
"key" : "Closed On Time"
}, {
"values" : [{
"y" : 0,
"x" : "Closed On Time"
}, {
"y" : 2,
"x" : "Closed Late"
}],
"key" : "1 - 7 Days Late"
},
{"values" : [{
"y" : 0,
"x" : "Closed On Time"
}, {
"y" : 10,
"x" : "Closed Late"
}],
"key" : "> 7 Days Late"
}];
function initAgingGraphs(data) {
nv.addGraph(function() {
var chart = nv.models.multiBarChart().stacked(true);
chart.yAxis.tickFormat(d3.format(',d'));
d3.select('svg#aging')
.datum(data)
.transition().duration(500).call(chart);
nv.utils.windowResize(chart.update);
return chart;
});
}