Question

我开发了一个带有一些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>'
        });

Answer 1

已解决我在函数中添加了一个简单的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>'
        });

NVD3 LineChart - 仅显示一行的工具提示

1 个答案: