Блог

Главная - Вопросы по программированию - Фильтрация данных для большей визуализации данных в react-chartjs-2, когда у вас много элементов массива

Фильтрация данных для большей визуализации данных в react-chartjs-2, когда у вас много элементов массива

#javascript #reactjs #charts #react-chartjs #react-chartjs-2

#javascript #reactjs #Диаграммы #react-chartjs #react-chartjs-2

Вопрос:

Я хочу получить правильные визуализированные данные на моей диаграмме, но это мешает, потому что есть 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
        },

….

хотите выводить как :введите описание изображения здесь

Комментарии:

1. покажите некоторый образец данных……

2. Могу ли я узнать, для каких свойств из приведенных выше вы пытаетесь построить график (intensity and start_year) ?

3. да, интенсивность против start_year

4. итак start_year , в data есть пустое значение, хотите ли вы отфильтровать его и показать?

5. не могли бы вы подробнее объяснить, что вас смущает..

Ответ №1:

Вы можете отфильтровать data массив, имеющий оба start_year и intensity и сопоставление для обоих значений :

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

Используя эти два, вы можете нарисовать график в соответствии с вашим запросом

примерный пример фильтрации данных здесь