根据 C3 图表中的区域选择显示过滤后的数据 - Angular

Question

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

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

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

我需要的是在图表中显示属于位置区域的位置onclick 的特定记录。比如说，如果我点击 Chennai 地区，我需要显示位置为 chennai

的记录

我尝试使用 c3 的 onclick 函数来实现同样的目的。在 onclick 内部，filteredData 是根据位置过滤数据的变量。单击时，我能够在控制台中记录 filteredData，但我在 UI.

中看不到相同的内容

能否请您帮忙将过滤后的数据绑定到 UI？

Answer 1

使用箭头函数引用当前对象

  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

根据 C3 图表中的区域选择显示过滤后的数据 - Angular

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

angular

c3.js