Question

genderPie()

let filter = {};


async function genderPie() {
  const d = await getData();
  const g = await d.reduce((a, o) => (o.GEN && a.push(o.GEN), a), []);
  const gender = Object.keys(g).length;
  const m = await d.reduce((a, o) => (o.GEN == 1 && a.push(o.GEN), a), []);
  const male = Object.keys(m).length;
  const f = await d.reduce((a, o) => (o.GEN == 2 && a.push(o.GEN), a), []);
  const female = Object.keys(f).length;


  var data = [{
    name: 'male',
    y: male,
    id: 1
  }, {
    name: 'female',
    y: female,
    id: 2
  }];

  chart = new Highcharts.Chart({
    plotOptions: {
      pie: {
        innerSize: '80%',
        dataLabels: {
          connectorWidth: 0
        }
      }
    },
    series: [{
      "data": data,
      type: 'pie',
      animation: false,
      point: {
        events: {
          click: function(event) {
            filter.GEN = '' + this.id + '';
          }
        }
      }
    }],
    "chart": {
      "renderTo": "gender"
    },
  });
}

async function getData() {

  buildFilter = (filter) => {
    let query = {};
    for (let keys in filter) {
      if (filter[keys].constructor === Array && filter[keys].length > 0) {
        query[keys] = filter[keys];
      }
    }
    return query;
  }

  //FILTER DATA

  //Returns the filtered data
  filterData = (dataset, query) => {
    const filteredData = dataset.filter((item) => {
      for (let key in query) {
        if (item[key] === undefined || !query[key].includes(item[key])) {
          return false;
        }
      }
      return true;
    });
    return filteredData;
  };


  //FETCH JSON
  const dataset = [{
      "GEN": "2"
    }, {
      "GEN": "1"
    }, {
      "GEN": "1"
    }, {
      "GEN": "2"
    },
    {
      "GEN": "2"
    }, {
      "GEN": "2"
    }, {
      "GEN": "2"
    }, {
      "GEN": "1"
    }
  ]

  //BUILD THE FILTER
  const query = buildFilter(filter);
  const result = filterData(dataset, query);
  console.log(result)
  return result

}

<script src="https://code.highcharts.com/highcharts.js"></script>



<div id="gender"></div>

有人可以向我解释如何处理以下内容吗？

我有两个过滤数据的功能，然后我用Hichart构建了图表每次用户单击例如饼图的切片时，都会触发一个事件并填充一个对象。该对象允许我过滤数据集并重绘图表

我最后遗漏的是要基于要填充的对象来更新过滤功能

首先，我会做

        async function getData() {
  buildFilter = (filter) => {
    let query = {};
    for (let keys in filter) {
        if (filter[keys].constructor === Array && filter[keys].length > 0) {
            query[keys] = filter[keys];
        }
    }
    return query;
  }

然后

  filterData = (data, query) => {
    const filteredData = data.filter( (item) => {
        for (let key in query) {
            if (item[key] === undefined || !query[key].includes(item[key])) {
                return false;
            }
        }
        return true;
    });
    return filteredData;
};

const query = buildFilter(filter);
const result =  filterData(data, query);

我的对象是

let filter = {}

例如，当用户单击切片myobject时

let filter = {
gen: "1"
}

Answer 1

看看这个StackBlitz project。

在getData()中，我将过滤器简化为以下过滤器：

return data.filter(item => {
    for (const property of Object.keys(filter)) {
        if (item[property] !== filter[property]) {
            return false;
        }
    }
    return true;
});

点击切片后，在更新genderPie()之后，我再次调用filter。

您可能希望将数据请求与过滤分开，以便仅下载数据一次，而不是每次更换过滤器。

变量更改时如何更新异步等待功能？

1 个答案: