类别中的某些元素在列表中被跳过。 在 X 轴上，但有列。我需要按正确的顺序列出所有类别。有什么建议吗？请包括 jsfiddle
$(function () {
$('#container_graph').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Events of Interest by Inmate'// - Last 30 Days'
},
xAxis: {
tickInterval: 1,
categories: ['10000000000050275','2433136','10000000000033173','847432','1688662','2417602','2488320','847324','10000000000050508','10000000000039394','1472668','986736','2505390','2126730','847608','1351346','1163300','2235992','2433172','847544','1350204','1072258','10000000000038760','2433072','958518','2058548','847104','1007642','847088','2237326','937802','2501650','1330470','2058694','1963596','10000000000048800','847562','1346466','10000000000038997','1347520','10000000000045278','10000000000020175','846918','847304','847320','2128070','1448834','847252','847646','10000000000026595','847224','846954','2126248','2415400','2361896','2343500','10000000000027155','10000000000052188','2126888','994038','10000000000044971','2058688','2260188','10000000000006432','1272236','1221744','881792','10000000000044958','881780','2139962','2095872','10000000000006643','1692334','2039862','2207290','1632428','2204646','10000000000046847','10000000000010534','1340552','1781426','2127830','2092820','847108','2433186','2393020','1013122','847026','2436194','846990','10000000000039378','2279736','2522830','10000000000045984','2126848','2405456','10000000000051005','2018202','1770978','2143796','2126750','1253234','2192700'],
labels: {
rotation: -45,
align: 'right',
style: {
fontSize: '10px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: {
min: 0,
title: {
text: 'Total Calls'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'right',
x: -70,
verticalAlign: 'top',
y: 20,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
formatter: function() {
return '<b>'+ this.x +'</b><br/>'+
this.series.name +': '+ this.y +'<br/>'+
'Total: '+ this.point.stackTotal;
}
},
plotOptions: {
column: {
stacking: 'normal',
cursor: 'pointer',
point: {
events: {
click: function() {
switch(this.series.name){
case 'PIN Sharing':
window.location ='dev_pin_drilldown.php?i=&dt='+this.category;
break;
case 'Multiple Speaker':
window.location ='dev_multi_drilldown.php?i=&dt='+this.category;
break;
}
}
}
}
}
},
series: [
{
type: 'column',
name: 'PIN Sharing',
color:'blue',
data: [
0,4,1,0,4,4,11,9,11,2,5,11,0,1,4,2,1,1,1,5,0,3,1,1,3,6,16,4,0,2,1,3,2,0,7,4,5,1,5,4,1,0,0,3,1,0,1,1,0,1,2,0,2,0,2,0,4,1,2,1,0,1,1,1,0,0,0,0,1,5,0,0,0,3,1,1,1,1,0,0,1,1,0,4,1,1,5,1,1,2,0,0,1,0,2,1,0,0,2,0,0,2,1
]
},
{
type: 'column',
name: 'Multiple Speaker',
color:'yellow',
data: [
1,0,0,1,1,3,0,9,0,0,0,1,2,1,0,1,0,3,3,0,1,2,3,3,0,0,5,0,13,2,1,0,0,2,24,0,0,0,0,1,1,1,7,1,0,1,1,0,2,3,0,1,0,3,0,3,1,0,1,0,1,0,0,0,1,1,1,1,0,4,3,1,2,3,5,5,0,0,1,1,1,4,2,5,0,0,0,0,0,0,1,1,0,0,0,0,1,1,0,4,1,0,0
]
}
]
});
});最佳答案
Highcharts 往往会删除一些类别以防止重叠。我发现防止这种情况的最佳方法是强制使用 tickPositions，如下例所示。
$(function() {
var categories = ['10000000000050275', '2433136', '10000000000033173', '847432', '1688662', '2417602', '2488320', '847324', '10000000000050508', '10000000000039394', '1472668', '986736', '2505390', '2126730', '847608', '1351346', '1163300', '2235992', '2433172', '847544', '1350204', '1072258', '10000000000038760', '2433072', '958518', '2058548', '847104', '1007642', '847088', '2237326', '937802', '2501650', '1330470', '2058694', '1963596', '10000000000048800', '847562', '1346466', '10000000000038997', '1347520', '10000000000045278', '10000000000020175', '846918', '847304', '847320', '2128070', '1448834', '847252', '847646', '10000000000026595', '847224', '846954', '2126248', '2415400', '2361896', '2343500', '10000000000027155', '10000000000052188', '2126888', '994038', '10000000000044971', '2058688', '2260188', '10000000000006432', '1272236', '1221744', '881792', '10000000000044958', '881780', '2139962', '2095872', '10000000000006643', '1692334', '2039862', '2207290', '1632428', '2204646', '10000000000046847', '10000000000010534', '1340552', '1781426', '2127830', '2092820', '847108', '2433186', '2393020', '1013122', '847026', '2436194', '846990', '10000000000039378', '2279736', '2522830', '10000000000045984', '2126848', '2405456', '10000000000051005', '2018202', '1770978', '2143796', '2126750', '1253234', '2192700'];
var positions = [];
for (var i = 0;i < categories.length;i++) {
positions.push(i);
}
$('#container_graph').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Events of Interest by Inmate' // - Last 30 Days'
},
xAxis: {
tickPositions: positions,
categories: categories,
labels: {
rotation: -45,
align: 'right',
style: {
fontSize: '10px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: {
min: 0,
title: {
text: 'Total Calls'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'right',
x: -70,
verticalAlign: 'top',
y: 20,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
formatter: function() {
return '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + this.y + '<br/>' +
'Total: ' + this.point.stackTotal;
}
},
plotOptions: {
column: {
stacking: 'normal',
cursor: 'pointer',
point: {
events: {
click: function() {
switch (this.series.name) {
case 'PIN Sharing':
window.location = 'dev_pin_drilldown.php?i=&dt=' + this.category;
break;
case 'Multiple Speaker':
window.location = 'dev_multi_drilldown.php?i=&dt=' + this.category;
break;
}
}
}
}
}
},
series: [
{
type: 'column',
name: 'PIN Sharing',
color: 'blue',
data: [
0, 4, 1, 0, 4, 4, 11, 9, 11, 2, 5, 11, 0, 1, 4, 2, 1, 1, 1, 5, 0, 3, 1, 1, 3, 6, 16, 4, 0, 2, 1, 3, 2, 0, 7, 4, 5, 1, 5, 4, 1, 0, 0, 3, 1, 0, 1, 1, 0, 1, 2, 0, 2, 0, 2, 0, 4, 1, 2, 1, 0, 1, 1, 1, 0, 0, 0, 0, 1, 5, 0, 0, 0, 3, 1, 1, 1, 1, 0, 0, 1, 1, 0, 4, 1, 1, 5, 1, 1, 2, 0, 0, 1, 0, 2, 1, 0, 0, 2, 0, 0, 2, 1
]
}, {
type: 'column',
name: 'Multiple Speaker',
color: 'yellow',
data: [
1, 0, 0, 1, 1, 3, 0, 9, 0, 0, 0, 1, 2, 1, 0, 1, 0, 3, 3, 0, 1, 2, 3, 3, 0, 0, 5, 0, 13, 2, 1, 0, 0, 2, 24, 0, 0, 0, 0, 1, 1, 1, 7, 1, 0, 1, 1, 0, 2, 3, 0, 1, 0, 3, 0, 3, 1, 0, 1, 0, 1, 0, 0, 0, 1, 1, 1, 1, 0, 4, 3, 1, 2, 3, 5, 5, 0, 0, 1, 1, 1, 4, 2, 5, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 1, 1, 0, 4, 1, 0, 0
]
}
]
});
});
关于javascript - xAxis 上的 Highcharts 中会跳过类别，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36742977/