NVD3 LineChart-仅显示一条线的工具提示

Silvio S. 发表于 Dev

西尔维奥·S。

我用一些CSS定制开发了一个简单的折线图。

有没有办法只显示图表中一条线的工具提示？我对文档研究（NVD3库）感到非常沮丧。

<script>
d3.json("chart3.json", function(error, data) 
{
     nv.addGraph(function() 
    {
        var chart = nv.models.lineChart()
            .x(function(d) { return d.x; })
            .y(function(d) { return d.y; })
            .useInteractiveGuideline(false)
            .showYAxis(false)
            .showXAxis(false)
            .showLegend(false)
            .forceY(0)
            .margin({left: 2})
            .margin({right: 2})
            .margin({bottom: 2})
            .tooltipContent(function(key, x, y, e, graph) {
            return '<div id="tooltipcustom">'+'<p id="head">' + x + '</p>' +
                '<p>' + y + ' cent/kWh/h/Runtime ' + '</p></div>'
        });

       chart.xAxis.tickFormat(function(d) 
      {

        return d3.time.format('%d/%m/%y')(new Date(d))
      });
chart.yAxis.tickValues([0],[1]);

        d3.select('#chart5 svg')
            .datum(data)
            .transition().duration(2500)
            .call(chart);
        nv.utils.windowResize(chart.update);
        return chart;
    });
});
</script>

解决了我在函数中添加了一个简单的If语句以生成工具提示内容。

.tooltipContent(function(key, x, y, e, graph) {
                if (key ==  '1')
            return '<div id="tooltipcustom">'+'<p id="head">' + x + '</p>' +
                '<p>' + y + ' cent/kWh/h/Runtime ' + '</p></div>'
        });

西尔维奥·S。

解决了我在函数中添加了一个简单的If语句以生成工具提示内容。

.tooltipContent(function(key, x, y, e, graph) {
                if (key ==  '1')
            return '<div id="tooltipcustom">'+'<p id="head">' + x + '</p>' +
                '<p>' + y + ' cent/kWh/h/Runtime ' + '</p></div>'
        });

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。