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

【问题标题】：Filtering data for more visualization of data in react-chartjs-2 when you have lot of array element当您有很多数组元素时，过滤数据以使 react-chartjs-2 中的数据更加可视化
【发布时间】：2021-01-12 10:09:11
【问题描述】：

我想在我的图表上获得正确的可视化数据，但是因为有 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
        },

....

希望输出为：

【问题讨论】：

显示一些数据样本......
我可以知道您要为(intensity and start_year) 绘制上面的哪些属性吗？
是强度与 start_year
所以数据中有start_year的空值，你想过滤掉它并显示吗？
你能解释一下你对什么感到困惑......

标签： javascript reactjs charts react-chartjs react-chartjs-2

【解决方案1】：

您可以在 filter 和 data 数组中同时包含 start_year 和 intensity 和 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);

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

样本数据过滤示例here

【讨论】：