高图表 我丢失了明细滚动条

Question

所以我正在把我的图表逐步提升到令人敬畏的水平，但在深入到细节数据时，我在某个地方丢失了滚动条。它过去工作得很好，现在它只显示了它可以容纳多少观众，而且表现得像其他人不在一样。

我已经能够在这个JSFiddle中重现这个问题：https://jsfiddle.net/BigSexy/qx5uzdf6/38/

var categoriesSL = ['Elementary', 'Middle', 'High'];
var categoriesElem = ["Ack/Bingham (E)", "Ackerly (E)", "AR Kennedy", "Atkinson", "Auburndale", "Audubon", "Bates", "Bellewood (E)", "Binet (E)", "Blake"];
var categoriesMid = ["Ack/Bingham (M)", "Ackerly (M)", "Barret", "Bellewood (M)", "Binet (M)", "Boys Haven (M)", "Brook-Dupont (M)", "Brook-KMI (M)", "Brooklawn (M)", "Brown (M)"];
var categoriesHigh = ["Ack/Bingham (H)", "Ackerly (H)", "Atherton", "Ballard", "Bellewood (H)", "Binet (H)", "Boys Haven (H)", "Breck-Metro", "Brook-KMI (H)", "Brooklawn (H)"]
refChart = new Highcharts.chart('ctReferrals', {
chart: {
backgroundColor: 'whiteSmoke',
events: {
drilldown: function() {
switch (this.ddDupes[0]) {
case 'elem':
case 'elem2':
refChart.xAxis[0].setCategories(categoriesElem);
break;
case 'mid':
case 'mid2':
refChart.xAxis[0].setCategories(categoriesMid);
break;
case 'high':
case 'high2':
refChart.xAxis[0].setCategories(categoriesHigh);
break;
default:
break;
}
refChart.xAxis[0].update({
max: 5
}, true);
console.log('scroll!');
this.update({
scrollbar: {
enabled: true,
}
}, false);
},
drillupall: function() {
refChart.xAxis[0].setCategories(categoriesSL);
refChart.xAxis[0].update({
max: 2
}, true);
console.log('dont scroll!');
this.update({
scrollbar: {
enabled: false
}
}, false);
}
},
type: 'column',
},
title: {
text: 'Total # of Referrals by School Level'
},
subtitle: {
text: 'By Year'
},
xAxis: {
categories: categoriesSL,
min: 0,
max: 2,
},
yAxis: [{
title: {
useHtml: true,
text: '<strong># Referrals</strong>'
}
}],
tooltip: {
shared: true,
},
plotOptions: {
column: {
borderRadius: 5,
dataLabels: {
enabled: true,
},
}
},
series: [{
name: '2017-18',
data: [{
color: '#7cb5ec',
drilldown: 'elem',
y: 13734
}, {
color: '#7cb5ec',
drilldown: 'mid',
y: 11999
}, {
color: '#7cb5ec',
drilldown: 'high',
y: 21245
}]
}, {
name: '2018-19',
data: [{
color: '#90ed7d',
drilldown: 'elem2',
y: 12500
}, {
color: '#90ed7d',
drilldown: 'mid2',
y: 10617
}, {
color: '#90ed7d',
drilldown: 'high2',
y: 21044
}]
}],
drilldown: {
allowPointDrilldown: false,
series: [{
id: 'elem',
name: '2017-18',
data: [{
schoolLevel: "01",
schoolID_alt: "993",
color: "#7cb5ec",
drilldown: "elem",
y: 0
},
{
schoolLevel: "01",
schoolID_alt: "990",
color: "#7cb5ec",
drilldown: "elem",
y: 0
},
{
schoolLevel: "01",
schoolID_alt: "194",
color: "#7cb5ec",
drilldown: "elem",
y: 5
},
{
schoolLevel: "01",
schoolID_alt: "117",
color: "#7cb5ec",
drilldown: "elem",
y: 562
},
{
schoolLevel: "01",
schoolID_alt: "92",
color: "#7cb5ec",
drilldown: "elem",
y: 88
},
{
schoolLevel: "01",
schoolID_alt: "30",
color: "#7cb5ec",
drilldown: "elem",
y: 48
},
{
schoolLevel: "01",
schoolID_alt: "39",
color: "#7cb5ec",
drilldown: "elem",
y: 51
},
{
schoolLevel: "01",
schoolID_alt: "989",
color: "#7cb5ec",
drilldown: "elem",
y: 0
},
{
schoolLevel: "01",
schoolID_alt: "932",
color: "#7cb5ec",
drilldown: "elem",
y: 271
},
{
schoolLevel: "01",
schoolID_alt: "103",
color: "#7cb5ec",
drilldown: "elem",
y: 282
},
{
schoolLevel: "01",
schoolID_alt: "123",
color: "#7cb5ec",
drilldown: "elem",
y: 44
}
]
}, {
id: 'elem2',
name: '2018-19',
data: [{
schoolLevel: "01",
schoolID_alt: "993",
color: "#fdfd96",
drilldown: "elem2",
y: 0
},
{
schoolLevel: "01",
schoolID_alt: "990",
color: "#fdfd96",
drilldown: "elem2",
y: 0
},
{
schoolLevel: "01",
schoolID_alt: "194",
color: "#ff6961",
drilldown: "elem2",
y: 43
},
{
schoolLevel: "01",
schoolID_alt: "117",
color: "#90ed7d",
drilldown: "elem2",
y: 178
},
{
schoolLevel: "01",
schoolID_alt: "92",
color: "#90ed7d",
drilldown: "elem2",
y: 83
},
{
schoolLevel: "01",
schoolID_alt: "30",
color: "#90ed7d",
drilldown: "elem2",
y: 9
},
{
schoolLevel: "01",
schoolID_alt: "39",
color: "#ff6961",
drilldown: "elem2",
y: 103
},
{
schoolLevel: "01",
schoolID_alt: "989",
color: "#ff6961",
drilldown: "elem2",
y: 33
},
{
schoolLevel: "01",
schoolID_alt: "932",
color: "#ff6961",
drilldown: "elem2",
y: 322
},
{
schoolLevel: "01",
schoolID_alt: "103",
color: "#90ed7d",
drilldown: "elem2",
y: 74
},
{
schoolLevel: "01",
schoolID_alt: "123",
color: "#ff6961",
drilldown: "elem2",
y: 57
}
]
}, {
id: 'mid',
name: '2017-18',
data: [{
schoolLevel: "02",
schoolID_alt: "994",
color: "#7cb5ec",
drilldown: "mid",
y: 0
},
{
schoolLevel: "02",
schoolID_alt: "925",
color: "#7cb5ec",
drilldown: "mid",
y: 0
},
{
schoolLevel: "02",
schoolID_alt: "28",
color: "#7cb5ec",
drilldown: "mid",
y: 27
},
{
schoolLevel: "02",
schoolID_alt: "930",
color: "#7cb5ec",
drilldown: "mid",
y: 0
},
{
schoolLevel: "02",
schoolID_alt: "933",
color: "#7cb5ec",
drilldown: "mid",
y: 178
},
{
schoolLevel: "02",
schoolID_alt: "936",
color: "#7cb5ec",
drilldown: "mid",
y: 2
},
{
schoolLevel: "02",
schoolID_alt: "917",
color: "#7cb5ec",
drilldown: "mid",
y: 0
},
{
schoolLevel: "02",
schoolID_alt: "940",
color: "#7cb5ec",
drilldown: "mid",
y: 0
},
{
schoolLevel: "02",
schoolID_alt: "943",
color: "#7cb5ec",
drilldown: "mid",
y: 1
},
{
schoolLevel: "02",
schoolID_alt: "904",
color: "#7cb5ec",
drilldown: "mid",
y: 25
},
{
schoolLevel: "02",
schoolID_alt: "113",
color: "#7cb5ec",
drilldown: "mid",
y: 677
}
]
}, {
id: 'mid2',
name: '2018-19',
data: [{
schoolLevel: "02",
schoolID_alt: "994",
color: "#fdfd96",
drilldown: "mid2",
y: 0
},
{
schoolLevel: "02",
schoolID_alt: "925",
color: "#fdfd96",
drilldown: "mid2",
y: 0
},
{
schoolLevel: "02",
schoolID_alt: "28",
color: "#ff6961",
drilldown: "mid2",
y: 37
},
{
schoolLevel: "02",
schoolID_alt: "930",
color: "#fdfd96",
drilldown: "mid2",
y: 0
},
{
schoolLevel: "02",
schoolID_alt: "933",
color: "#90ed7d",
drilldown: "mid2",
y: 80
},
{
schoolLevel: "02",
schoolID_alt: "936",
color: "#ff6961",
drilldown: "mid2",
y: 6
},
{
schoolLevel: "02",
schoolID_alt: "917",
color: "#ff6961",
drilldown: "mid2",
y: 1
},
{
schoolLevel: "02",
schoolID_alt: "940",
color: "#fdfd96",
drilldown: "mid2",
y: 0
},
{
schoolLevel: "02",
schoolID_alt: "943",
color: "#ff6961",
drilldown: "mid2",
y: 35
},
{
schoolLevel: "02",
schoolID_alt: "904",
color: "#90ed7d",
drilldown: "mid2",
y: 6
},
{
schoolLevel: "02",
schoolID_alt: "113",
color: "#90ed7d",
drilldown: "mid2",
y: 625
}
]
}, {
id: 'high',
name: '2017-18',
data: [{
schoolLevel: "03",
schoolID_alt: "995",
color: "#7cb5ec",
drilldown: "high",
y: 0
},
{
schoolLevel: "03",
schoolID_alt: "926",
color: "#7cb5ec",
drilldown: "high",
y: 0
},
{
schoolLevel: "03",
schoolID_alt: "11",
color: "#7cb5ec",
drilldown: "high",
y: 1322
},
{
schoolLevel: "03",
schoolID_alt: "80",
color: "#7cb5ec",
drilldown: "high",
y: 604
},
{
schoolLevel: "03",
schoolID_alt: "931",
color: "#7cb5ec",
drilldown: "high",
y: 0
},
{
schoolLevel: "03",
schoolID_alt: "934",
color: "#7cb5ec",
drilldown: "high",
y: 553
},
{
schoolLevel: "03",
schoolID_alt: "937",
color: "#7cb5ec",
drilldown: "high",
y: 12
},
{
schoolLevel: "03",
schoolID_alt: "938",
color: "#7cb5ec",
drilldown: "high",
y: 725
},
{
schoolLevel: "03",
schoolID_alt: "941",
color: "#7cb5ec",
drilldown: "high",
y: 0
},
{
schoolLevel: "03",
schoolID_alt: "944",
color: "#7cb5ec",
drilldown: "high",
y: 0
},
{
schoolLevel: "03",
schoolID_alt: "905",
color: "#7cb5ec",
drilldown: "high",
y: 52
}
]
}, {
id: 'high2',
name: '2018-19',
data: [{
schoolLevel: "03",
schoolID_alt: "995",
color: "#fdfd96",
drilldown: "high2",
y: 0
},
{
schoolLevel: "03",
schoolID_alt: "926",
color: "#fdfd96",
drilldown: "high2",
y: 0
},
{
schoolLevel: "03",
schoolID_alt: "11",
color: "#90ed7d",
drilldown: "high2",
y: 1079
},
{
schoolLevel: "03",
schoolID_alt: "80",
color: "#90ed7d",
drilldown: "high2",
y: 548
},
{
schoolLevel: "03",
schoolID_alt: "931",
color: "#fdfd96",
drilldown: "high2",
y: 0
},
{
schoolLevel: "03",
schoolID_alt: "934",
color: "#ff6961",
drilldown: "high2",
y: 647
},
{
schoolLevel: "03",
schoolID_alt: "937",
color: "#ff6961",
drilldown: "high2",
y: 13
},
{
schoolLevel: "03",
schoolID_alt: "938",
color: "#ff6961",
drilldown: "high2",
y: 823
},
{
schoolLevel: "03",
schoolID_alt: "941",
color: "#fdfd96",
drilldown: "high2",
y: 0
},
{
schoolLevel: "03",
schoolID_alt: "944",
color: "#ff6961",
drilldown: "high2",
y: 81
},
{
schoolLevel: "03",
schoolID_alt: "905",
color: "#90ed7d",
drilldown: "high2",
y: 3
}
]
}]
},
exporting: {
scale: 2,
chartOptions: {
xAxis: [{
categories: categoriesElem,
min: 0,
max: categoriesElem.length
}]
}
},
credits: {
enabled: false
}
})
$(function() {
(function(H) {
//DATALABELS
H.wrap(H.Series.prototype, 'drawDataLabels', function(proceed) {
var css = this.chart.options.drilldown.activeDataLabelStyle;
proceed.call(this);
css.textDecoration = 'none';
css.fontWeight = 'bold';
css.cursor = 'default';
css.color = 'black';
H.each(this.points, function(point) {
if (point.drilldown && point.dataLabel) {
point.dataLabel
.css(css)
.on('click', function() {
return false;
});
}
});
});
})(Highcharts);
})

如果有帮助的话，这里有一个实际图表的链接：https://assessment.jefferson.kyschools.us/DMC/District%20Datacard/ddReferrals

如果您能提供任何帮助，将不胜感激

Answer 1

您使用了Highcharts源代码：

<script src="https://code.highcharts.com/highcharts.js"></script>

滚动条功能仅适用于Highstock:

<script src="https://code.highcharts.com/stock/highstock.js"></script>

现场演示：https://jsfiddle.net/BlackLabel/a126pnxv/