如何解决在折线图上显示工具提示“日明智”峰值或低度指标
工具提示可以正常使用,但我想Day Wise
不在几天之间显示它。
目前它正在自由移动,我只想展示它与JS小提琴示例一样明智。
最小代码示例。 StackBlitz Code
我希望我的Tootip像这样显示(不是相同的UI,而是移动体验): Js Fiddle For Example
解决方法
您可以在所选行(mouseenter)
上使用Path
在该特定行上显示工具提示。
在工具提示框上放一个布尔:
.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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。