根据C3图表中的区域选择显示过滤后的数据-Angular [英] Show filtered data based on selection of region in C3 chart - Angular

问题描述

我的代码是 https://codesandbox.io/s/late-forest-cuwf7

我有2个文件:app.component.html和app.component.ts

I have 2 files : app.component.html and app.component.ts

我显示一个图表，其中显示1属于一个位置，而1属于另一个位置.

I display a chart which shows 1 belongs to one location and 1 belongs to another location.

我需要的是显示特定记录，该记录属于图表中位置区域的onclick位置.假设，如果我单击金奈地区，则需要显示位置为金奈的记录

What I need is to display that particular record which belongs to the location onclick of the location region in chart. Say, if i click on Chennai region, I need to display the record in which location is chennai

我试图利用c3的onclick函数.在onclick内部，filteredData是根据位置过滤数据的变量.单击时，能够在控制台中记录filteredData，但在UI中看不到相同的内容.

I tried to make use of onclick function of c3 for the same. Inside onclick, filteredData is the variable which has the data filtered based on location. On click, am able to log filteredData in console, but i don't see the same visible in UI.

能否帮助您将此过滤后的数据绑定到UI?

Could you please help on binding this filtered data to UI?

推荐答案

使用箭头功能引用当前对象

Use arrow function to refer current object

  ngAfterViewInit() {
    let value = JSON.parse(JSON.stringify(this.resultData));
    this.chart = c3.generate({
      bindto: "#chart",
      data: {
        onclick: (d, element) => {
          this.filteredData = value.filter(record => record.location === d.id);
          console.log(this.filteredData);
        },
        json: [_.countBy(this.resultData, x => x.location)],
        type: "pie",
        keys: {
          value: _.uniq(_.pluck(this.resultData, "location"))
        }
      }
    });
  }

分叉示例

这篇关于根据C3图表中的区域选择显示过滤后的数据-Angular的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！