在折线图上显示工具提示 "Day Wise"(峰值或低指标)
Show Tooltip "Day Wise" on Line Graph (on Peak or Low metric)
工具提示工作正常,但我想 Day Wise
不在几天之间显示它。
目前它正在自由移动我只想展示它与 JS 一样明智 fiddle 示例。
最小代码示例。
StackBlitz Code
我希望我的 Tootip 像这个例子一样显示(不一样 UI 但移动体验):
Js Fiddle For Example
您可以在所选行 Path
上使用 (mouseenter)
以在该特定行上显示工具提示。
在您的工具提示框上取一个布尔值:
.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>
工具提示工作正常,但我想 Day Wise
不在几天之间显示它。
目前它正在自由移动我只想展示它与 JS 一样明智 fiddle 示例。
最小代码示例。 StackBlitz Code
我希望我的 Tootip 像这个例子一样显示(不一样 UI 但移动体验): Js Fiddle For Example
您可以在所选行 Path
上使用 (mouseenter)
以在该特定行上显示工具提示。
在您的工具提示框上取一个布尔值:
.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>