Angular nvd3 interactive guideline show too much data

问题

I am creating a line chart with 3 lines.

First line has data from dateA to dateB

Second and third lines have data from dateB to dateC

The problem is linked to the interactive guideline. When the mouse is over the first line (dark blue) it should only display the value of this line. For the moment, it display all the values

How can I display only the value when there is one ?

回答1:

Not the perfect solution, but you can fill the values of the 1st line with null value from dateB to dateC

See this plunker

回答2:

You can try to solve this three ways.

1. First one is the solution mentioned: add null to fill the values.

2. Use content generator to create custom tooltip, and useInteractiveGuideline should be set to false

        tooltip: {
         contentGenerator: (e) => {
           return '<h1>Hello</h1>';
         }
       }
   

3. If you don't get proper data in the tooltip event, try with callback and get event data:

   callback(chart) {
     if (chart && chart.interactiveLayer) {
       const tooltip = chart.interactiveLayer.tooltip;
       tooltip.gravity('s');
       tooltip.contentGenerator(event => '<h1>Hello</h1>');
     }
   }
   

来源：https://stackoverflow.com/questions/40976656/angular-nvd3-interactive-guideline-show-too-much-data