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

【问题标题】：Angular nvd3 interactive guideline show too much dataAngular nvd3 交互式指南显示太多数据
【发布时间】：2016-12-05 14:32:48
【问题描述】：

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

第一行包含从 dateA 到 dateB

的数据

第二行和第三行的数据从 dateB 到 dateC

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

当有一个值时如何只显示值？

【问题讨论】：

标签： angularjs d3.js nvd3.js

【解决方案1】：

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

看到这个plunker

【讨论】：

这里你传递了 null 作为点值。所以它显示 N/A。但是该图未连接。对于 null 值，它显示空点，显示线点未连接。我需要连接这些线并且需要删除工具提示中的点或需要显示 N/A。查看我的代码plnkr.co/edit/WbIe62ZcBbbuG00SbpLE?p=preview
这里引用了同样的东西：github.com/novus/nvd3/issues/1897 我有一个类似的问题，我需要在每个数据点的工具提示上显示时间戳和一个值，并且都有不同的时间线。因此，这不是我的解决方案。

【解决方案2】：

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

第一个是提到的解决方案：添加 null 来填充值。

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

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

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

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

【讨论】：