javascript - 当您有很多数组元素时，过滤数据以使 react-chartjs-2 中的数据更加可视化

Question

我想在我的图表上获得适当的可视化数据，但是因为有 1000 个数组元素，所以它搞砸了。我不想减少数据，但实际上是为了获得适当的可视化，因为在图形的 x 轴中它显示的是 NaN 值。

fetch("./data.json")
      .then((res) => {
        return res.json();
      })
      .then((data) => {
        console.log(data);
        for (const dataObj of data) {
          empSal.push(parseInt(dataObj.intensity));
          empAge.push(parseInt(dataObj.start_year));
        }.catch((err) => {
    console.log(err);
  });

(1000) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, …]

样本数据（data.json）：

 [
        {
            "end_year": "",
            "intensity": 6,
            "sector": "Energy",
            "topic": "gas",
            "insight": "Annual Energy Outlook",
            "url": "http://www.eia.gov/outlooks/aeo/pdf/0383(2017).pdf",
            "region": "Northern America",
            "start_year": "",
            "impact": "",
            "added": "January, 20 2017 03:51:25",
            "published": "January, 09 2017 00:00:00",
            "country": "United States of America",
            "relevance": 2,
            "pestle": "Industries",
            "source": "EIA",
            "title": "U.S. natural gas consumption is expected to increase during much of the projection period.",
            "likelihood": 3
        },

……

想要输出为：

Answer 1

您可以过滤data同时具有start_yearandintensity和map的数组的值：

const intensity = data.filter(el => el.intensity && el.start_year).map(val => val.intensity);
const year = data.filter(el => el.intensity && el.start_year).map(val => val.start_year);

使用这两个，您可以根据您的要求绘制图表

示例数据过滤示例在这里