Question

我正在使用nvd3图表库在我们的应用程序中显示报告。我试图使用nvd3库显示条形图。除了工具提示外，一切正常。我没有得到鼠标悬停功能的工具提示。我无法想象它出了问题。请帮我解决这个问题。脚本在下面提供，

function BarChart(chartData, chartid) {
    var seriesOptions = [];

    for (var i = 0; i < chartData.length; i++) {
       seriesOptions[i] = {
                key: chartData[i].Name,
                values: eval("[" + chartData[i].Value + "]")
            };
    }

    nv.addGraph(function () {

        var chart = nv.models.multiBarChart().color(d3.scale.category10().range());

        chart.xAxis.tickFormat(d3.format(',.2f'));
        chart.yAxis.tickFormat(d3.format(',.2f'));        

        d3.select('#chartcontainer1 svg')
              .datum(seriesOptions)
              .transition()
              .call(chart);
        nv.utils.windowResize(chart.update);
        return chart;
    });

}

Answer 1

您可以通过调用工具提示功能调用（并个性化）工具提示，如下所示：

chart.tooltip(function (key, x, y, e, graph) {
       return '<p><strong>' + key + '</strong></p>' +
       '<p>' + y + ' in the month ' + x + '</p>';
});

在您的示例中，您可以在return chart;行之前插入它。

Answer 2

我遇到了与lineWithFocusChart类似的问题，我的问题是我使用Bower安装的库不适用于工具提示。一旦我链接到nvd3的实例上给出的库，它就可以了。

<link rel="stylesheet" href="http://nvd3.org/src/nv.d3.css">

<script src="http://nvd3.org/js/lib/jquery.min.js"></script>
<script src="http://nvd3.org/lib/d3.v2.js"></script>
<script src="http://nvd3.org/nv.d3.js"></script>

工具提示未显示在nvd3图表中（条形图）

2 个答案: