Angular nvd3交互式指南显示了太多数据

Question

我正在创建一个包含3行的折线图。

第一行包含 dateA 到 dateB 的数据

第二行和第三行的数据来自 dateB 到 dateC

问题与互动指南有关。当鼠标悬停在第一行（深蓝色）上时，它应该只显示该行的值。目前，它显示所有值

如果只有值，我该如何显示？

Answer 1

不是完美的解决方案，但您可以使用 dateB 中的null值填充第1行的值到 dateC

请参阅此plunker

Answer 2

您可以尝试解决这三种方式。

1. 首先是提到的解决方案：添加null以填充值。

2. 使用内容生成器创建自定义工具提示，并将useInteractiveGuideline设置为false

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

3. 如果您在工具提示事件中没有获得正确的数据，请尝试使用回调并获取事件数据：

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