NVD3.js - 如何在堆积条形图上更改工具提示的位置?

时间:2015-08-19 00:36:05

标签: jquery nvd3.js

我使用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;
        });
    }

enter image description here

enter image description here

enter image description here

0 个答案:

没有答案
相关问题