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

Question

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

第一行包含从 dateA 到 dateB

的数据

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

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

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

Answer 1

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

看到这个plunker

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

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

Angular nvd3 interactive guideline show too much data

d3.js

angularjs

nvd3.js