2015-06-05 57 views
1

我開發了一些帶有一些css自定義的簡單折線圖。NVD3 LineChart - 僅顯示一條線的工具提示

有沒有辦法顯示工具提示僅適用於圖表中的一條線? 我對研究文檔(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> 

解決 我添加了一個簡單如果函數語句來生成提示內容。

.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>' 
     }); 
+0

您可以發佈您的解決方案作爲答案並接受它。 – shabeer90

回答

1

解決我添加了一個簡單如果函數語句來生成提示內容。

.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>' 
     });