javascript - 在折线图上显示工具提示 "Day Wise"(峰值或低指标)

Question

工具提示工作正常，但我想在 Day Wise 之间显示它，而不是在几天之间。目前它正在自由移动，我只想展示它与 JS fiddle 示例一样明智。

最小代码示例。 StackBlitz Code

我希望我的 Tootip 像这个例子一样显示(不同的 UI 但移动的体验): Js Fiddle For Example

Answer 1

您可以在所选行路径 上使用(mouseenter) 以在该特定行上显示您的工具提示。在您的工具提示框上取一个 bool 值:

.ts

showTool: boolean = false; // false by default

.html

<div id="stats_box" [ngStyle]="{ left: stats_box.x + 'px' }" *ngIf="showTool">
  //Your Tooltip Content
</div>

<g class="graph_lines" style="clip-path: url(#grid_space);">
 <path attr.id="path{{ channel.channel_id }}" *ngFor="let line of graph_arr.slice(0, 5); let i = index" (click)="switch_paths(line.id)" class="graph_line active" [attr.d]="line.points" stroke-linejoin="round" [attr.fill]="selected.id == line.id ? border_colors[i]: 'transparent'" [ngStyle]="{ stroke: selected.id == line.id ? 'black' : border_colors[i] }" (mouseenter)="selected.id == line.id ? showTool = true : showTool = false"/>
 <use id="use" attr.xlink:href="#path{{ graph_line_switch }}" height="90%"/>
</g>