如果单击事件不可用,则面临使用 ngx-charts 隐藏指针的问题

问题描述 投票:0回答:1

从昨天开始,我一直在尝试修改

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 angular ngx-charts
1个回答
0
投票

我没有尝试过,但我认为应该适合你的情况 第一个在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;
}

尝试一下并告诉我们。

© www.soinside.com 2019 - 2024. All rights reserved.