显示数据集的一部分

Question

我得到了一个包含不同城市的温度值的数据集。为了可视化这些值，我使用ngx-charts。 数据集包含慕尼黑，柏林和斯图加特的子集。单击时是否可以隐藏某个子集？ 例如，使用折线图绘制了这三个集合。选择斯图加特会隐藏斯图加特，这样只会显示慕尼黑和柏林。

Answer 1

图表会发出点击事件，因此您可以基于此事件修改数据。

在模板中，使用图表中的select输出：

<ngx-charts-line-chart  
  [results]="data"
  (select)="select($event)">
</ngx-charts-line-chart>

在您的组件中，实现select方法：

select(item) {
  console.log('Item clicked', item);

  // filter your data object here based on the data in item
  this.data = [...this.data.filter(i => {
    return i.name !== item.series;
  })]
}