从昨天开始,我一直在尝试修改
swimlane/ngx-charts
库,以在鼠标悬停时隐藏图表中的指针。我们正在使用此库中的饼图,这就是默认光标悬停在图表上时的样子:
我们的许多客户因此感到困惑,因为他们认为有一些与之相关的点击操作,但点击它却没有任何反应。那么,是否可以调整此设置以隐藏手形指针,并且仅在单击时没有关联的号召性用语时才显示默认的“箭头”指针?
我们有多个图表;有些在单击时不执行任何操作(此处显示默认的“箭头”指针),而另一些则在单击时将用户导航到某些内部路线(在这种情况下悬停时显示手形指针)。
我尝试过的:
我尝试阅读一个与我的问题类似的问题:
https://github.com/swimlane/ngx-charts/issues/525
但它讨论了编辑库文件,在我的例子中,库文件是node_modules的一部分,我不希望编辑这些文件,因为它会在将来产生问题。
我也尝试在我的
styles.scss
中添加这样的CSS代码:
.ngx-charts {
.circle,
.bar,
.arc {
cursor: default !important;
}
}
但这又会完全隐藏手指针,即使在具有与点击相关的号召性用语的图表中也是如此。
我的期待:
如果您能帮助我仅在与图表上的单击关联的特定操作时启用手指针,那么对于没有关联的单击操作的所有其他情况,我只想显示默认值“箭头”指针。
我没有尝试过,但我认为应该适合你的情况 第一个在CSS中添加
.no-pointer {
cursor: default !important;
}
然后对于具有与点击相关的号召性用语的元素,添加无指针类
<ngx-charts-bar-vertical
[results]="barChartData"
[xAxis]="showXAxis"
[yAxis]="showYAxis"
[showXAxisLabel]="showXAxisLabel"
[showYAxisLabel]="showYAxisLabel"
[xAxisLabel]="xAxisLabel"
[yAxisLabel]="yAxisLabel"
[gradient]="gradient"
[noPointer]="true" <!-- Add this line -->
></ngx-charts-bar-vertical>
因为我们已将 [noPointer]="true" 属性添加到 ngx-charts-bar-vertical 组件中。该属性可用于有条件地将无指针类应用于组件。
现在,在CSS规则中仅应用光标:默认规则到具有.no-pointer类的元素。
.ngx-charts .circle,
.ngx-charts .bar,
.ngx-charts .arc {
cursor: pointer;
}
.ngx-charts .no-pointer {
cursor: default !important;
}
尝试一下并告诉我们。