JavaScript пишет Uncaught TypeError: category is undefined

Рейтинг: 0Ответов: 0Опубликовано: 26.01.2023

Не могу разобраться в чем проблема, проект не работает, в консоли отображает ошибку Uncaught TypeError: category is undefined. Ругается на category в функции rebuildData(). Хотя если запустить в JsFiddle все работает https://jsfiddle.net/7rsje3gy/4/

//конструкторы
function Category(name) {
    this.name = name;
    this.visible = true;
  }

  function Point(category, y) {
    this.y = y;
    this.category = category;
  }

  function Names(category, u) {
    this.name = u;
  }



  //данные
  var originalCategories = [new Category('Honda'), new Category('Toyota'), new Category('Suzuki')].map(function(cat, i) {
    cat.index = i;
    return cat
  });

  var originalSeries = [{
    name: ['СМИ'].map((u, i) => new Names(originalCategories[i], u)),
    data: [35, 15, 10].map((y, i) => new Point(originalCategories[i], y)) 
  }, {
    name: ['Соцсети'].map((u, i) => new Names(originalCategories[i], u)),
    data: [55, 40, 33].map((y, i) => new Point(originalCategories[i], y)) 
  }, {
    name: ['Всего'].map((u, i) => new Names(originalCategories[i], u)),
    data: [90, 55, 43].map((y, i) => new Point(originalCategories[i], y)) 
  }];


  
  function filterCategories() {
    var filteredCategories = [];
    $.each(originalCategories, function(i, category) {
      if (category.visible) {
        
        filteredCategories.push(category.name);
      }
    });
    return filteredCategories;
  }

  function filterSeries() {
    var filteredSeries = [];
    $.each(originalSeries, function(i, serie) {
      
      var newSerie = {
        data: [],
        name: []
      };
      $.each(serie.data, function(i, point) {
        if (point.category.visible) {
          newSerie.data.push(point);
        }
      });
      $.each(serie.name, function(i, u) {
        newSerie.name.push(u.name);
      });


      filteredSeries.push(newSerie);
    });
    return filteredSeries;
  }

 //график
  var chisist = Highcharts.chart('chisist', {
    chart: {
      type: 'bar'
    },
    title: {
      text: '',

    },

    xAxis: {
      categories: filterCategories(),

      title: {
        text: null
      }
    },
    yAxis: {
      min: 0,
      title: {
        text: null,

      },
      
    },

    exporting: {
      enabled: false
    },


    credits: {
      enabled: false
    },
    series: filterSeries(),

  });



  
  var chart = $('#chisist').highcharts();

  //сценарий на нажатие
  $(document).on('click', 'input', function(e) {
    
    rebuildData();
    
  });

  
  function rebuildData() {
    $.each($('input'), function(i, box) {
        
      var checkbox = this;
      //ВОТ НА ЭТУ category РУГАЕТСЯ!!!!
      var category = originalCategories.find((category) => category.name === checkbox.id);
      category.visible = checkbox.checked;
    }); 

    chart.update({
      series: filterSeries(),
      xAxis: {
        categories: filterCategories()
      }
    });

  }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>


<table class="table">
                                    <thead class="thead">
                                        <tr>
                                            <th>№</th>
                                            <th>Название проекта</th>
                                            <th>Сравнить</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>1</td>
                                            <td>Honda</td>
                                            <td align="center"><input id="Honda"  type="checkbox" checked><br /></td>
                                        </tr>
                                        <tr>
                                            <td>2</td>
                                            <td>Toyota</td>
                                            <td align="center"><input id="Toyota"  type="checkbox" checked><br /></td>
                                        </tr>
                                        <tr>
                                            <td>3</td>
                                            <td>Suzuki</td>
                                            <td align="center"><input id="Suzuki"  type="checkbox" checked><br /></td>
                                        </tr>
                                    </tbody>
                                </table>




<div id="chisist" ></div>

Ответы

Ответов пока нет.