Я изолировал свою проблему, но не смог ее исправить. Я надеюсь, что блестящие умы переполнения стека могут помочь!
Проблема: Функция сортировки перестает работать, когда присутствуют введенные таблицы. Когда я удаляю инъекции, функции сортировки работают отлично. Есть ли способ изолировать скрипт sr c, чтобы он работал только для введенных графиков? Попытка ссылаться на них до того, как старшие графики не сработают.
Моя страница: http://www.wcsddata.net/wearewcsd
В начале моей страницы я ссылаюсь на следующие сценарии, поэтому мои верхние графики будут работать в нижней части страницы на вкладках:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
<script src="https://code.highcharts.com/modules/offline-exporting.js"></script>
Вверху у меня есть 4 графика, которые были введены в страницу через everviz и используют «script srce»:
<div id="highcharts-fvqBbZn4G" style="width: 100%; height: 220px; float: left; padding-bottom: 40px;"><script src="https://app.everviz.com/inject/fvqBbZn4G/" defer="defer"></script></div>
<div id="highcharts-AMGYgGD6V" style="width: 34%; height: 300px; float: left;"><script src="https://app.everviz.com/inject/AMGYgGD6V/" defer="defer"></script></div>
<div id="highcharts-pEyKRkM-l" style="width: 33%; height: 300px; float: left;"><script src="https://app.everviz.com/inject/pEyKRkM-l/" defer="defer"></script></div>
<div id="highcharts-USL8gYv5J" style="width: 33%; height: 300px; float: left;"><script src="https://app.everviz.com/inject/USL8gYv5J/" defer="defer"></script></div>
Внизу, у меня есть наборы вкладок, которые имеют 8 различных высоких графиков, и многие из них имеют возможность сортировки (по алфавиту, по низким и по высоким). Ниже приведен код одного из них:
<script>
var categories = ['AACT', 'Allen', 'Anderson', 'Beasley', 'Beck', 'Bennett', 'Billinghurst', 'Booth', 'Brown', 'Cannan', 'Caughlin Ranch', 'Clayton', 'Cold Springs', 'Corbett', 'Damonte Ranch', 'Depoali', 'Desert Heights', 'Desert Skies', 'Diedrichsen', 'Dilworth', 'Dodson', 'Donner Springs', 'Double Diamond', 'Drake', 'Duncan', 'Dunn', 'Elmcrest', 'Galena', 'Gerlach K-12', 'Gomes', 'Gomm', 'Greenbrae', 'Hall', 'Hidden Valley', 'Huffaker', 'Hug', 'Hunsberger', 'Hunter Lake', 'Incline ES', 'Incline HS', 'Incline MS', 'Innovations', 'Inspire', 'Juniper', 'Lemelson', 'Lemmon Valley', 'Lenz', 'Lincoln Park', 'Loder', 'Mathews', 'Maxwell', 'McQueen', 'Melton', 'Mendive', 'Mitchell', 'Moss', 'Mount Rose K-8', 'Natchez', 'North Star', 'North Valleys', 'OBrien', 'Palmer', 'Peavine', 'Picollo', 'Pine', 'Pleasant Valley', 'Poulakidas', 'Reed', 'Reno', 'Risley', 'Sepulveda', 'Shaw', 'Silver Lake', 'Sky Ranch', 'Smith Alice', 'Smith Kate', 'Smithridge', 'Spanish Springs ES', 'Spanish Springs HS', 'Sparks HS', 'Sparks MS', 'Stead', 'Sun Valley', 'Swope', 'Taylor', 'TMCC HS', 'Towles', 'Traner', 'Turning Point', 'Van Gorder', 'Vaughn', 'Verdi', 'Veterans', 'Warner', 'Westergard', 'Whitehead', 'Winnemucca', 'Wooster'];
Highcharts.chart('containerfrlschl', {
chart: {
type: 'bar',
events: {
load: function() {
var points = this.series[0].points,
chart = this,
newPoints = [];
Highcharts.each(points, function(point, i) {
point.update({
name: categories[i]
}, false);
newPoints.push({
x: point.x,
y: point.y,
name: point.name
});
});
chart.redraw();
// Sorting A - Z
$('#sort7').on('click', function() {
newPoints.sort(function(a, b) {
if (a.name < b.name)
return -1;
if (a.name > b.name)
return 1;
return 0;
});
Highcharts.each(newPoints, function(frl, i) {
frl.x = i;
});
chart.series[0].setData(newPoints, true, false, false);
});
// Sorting min - max
$('#sort8').on('click', function() {
newPoints.sort(function(a, b) {
return a.y - b.y
});
Highcharts.each(newPoints, function(frl, i) {
frl.x = i;
});
chart.series[0].setData(newPoints, true, false, false);
});
// Sorting max - min
$('#sort9').on('click', function() {
newPoints.sort(function(a, b) {
return b.y - a.y
});
Highcharts.each(newPoints, function(frl, i) {
frl.x = i;
});
chart.series[0].setData(newPoints, true, false, false);
});
}
}
},
exporting: {
enabled: false
},
title:{
text:''
},
xAxis: {
type: 'category'
},
yAxis: {
min: 0,
max: 100,
title: {
text: 'Percentage of Student Population'
}
},
tooltip: {
valueSuffix: '%'
},
credits: {
enabled: false
},
legend: {
enabled: false,
reversed: true,
align: 'center',
verticalAlign: 'top',
itemDistance: 20,
itemStyle: {
"font-family": "'Open Sans', sans-serif",
"color": "#373737",
"fontSize": "16px",
"fontWeight": "normal"
}
},
plotOptions: {
series: {
stacking: 'normal',
dataLabels: {
enabled: true,
filter: {
property: 'percentage',
operator: '>',
value: 1
},
style: {
"font-family": "'Open Sans', sans-serif",
"color": "#ffffff",
"fontSize": "14px",
"fontWeight": "normal",
"textOutline": false
},
format: '{point.y}%'
}
}
},
series: [{
name: 'FRL',
color: '#00619e',
data: [19, 100, 100, 25, 28, 100, 26, 100, 15, 100, 9, 49, 43, 100, 24, 21, 100, 100, 45, 100, 100, 59, 38, 100, 100, 55, 100, 30, 32, 41, 10, 100, 29, 53, 32, 100, 4, 47, 45, 41, 46, 45, 100, 57, 100, 100, 9, 100, 100, 100, 100, 24, 11, 40, 100, 35, 35, 100, 28, 44, 58, 100, 52, 100, 50, 19, 12, 28, 19, 100, 30, 21, 50, 23, 100, 100, 100, 13, 27, 60, 100, 100, 100, 27, 23, 18, 45, 100, 100, 13, 100, 24, 100, 100, 21, 36, 37, 52]
}]
});</script>
Заранее спасибо! Кен