JavaScript пишет Uncaught TypeError: category is undefined
Не могу разобраться в чем проблема, проект не работает, в консоли отображает ошибку 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>
Источник: Stack Overflow на русском