Show filtered data based on selection of region in C3 chart - Angular

问题

My code is https://codesandbox.io/s/late-forest-cuwf7

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

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

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

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.

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

回答1:

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"))
        }
      }
    });
  }

Forked Example

来源：https://stackoverflow.com/questions/59397012/show-filtered-data-based-on-selection-of-region-in-c3-chart-angular