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

Question

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

swimlane/ngx-charts

库，以在鼠标悬停时隐藏图表中的指针。我们正在使用此库中的饼图，这就是默认光标悬停在图表上时的样子：

我们的许多客户因此感到困惑，因为他们认为有一些与之相关的点击操作，但点击它却没有任何反应。那么，是否可以调整此设置以隐藏手形指针，并且仅在单击时没有关联的号召性用语时才显示默认的“箭头”指针？

我们有多个图表；有些在单击时不执行任何操作（此处显示默认的“箭头”指针），而另一些则在单击时将用户导航到某些内部路线（在这种情况下悬停时显示手形指针）。

我尝试过的：

我尝试阅读一个与我的问题类似的问题：

https://github.com/swimlane/ngx-charts/issues/525

但它讨论了编辑库文件，在我的例子中，库文件是node_modules的一部分，我不希望编辑这些文件，因为它会在将来产生问题。

我也尝试在我的

styles.scss

中添加这样的CSS代码：

.ngx-charts {
  .circle,
  .bar,
  .arc {
    cursor: default !important;
  }
}

但这又会完全隐藏手指针，即使在具有与点击相关的号召性用语的图表中也是如此。

我的期待：

如果您能帮助我仅在与图表上的单击关联的特定操作时启用手指针，那么对于没有关联的单击操作的所有其他情况，我只想显示默认值“箭头”指针。

Answer 1

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

尝试一下并告诉我们。