我有一个关于如何使用drilldown对高图中的列进行排序的问题,我可以在开始时对主数据进行排序,但是当它向下钻取时,排序功能无法正常工作,我真的不明白,如何排序钻取后的数据。 第一级数据:enter image description here
第二级数据:(无法排序)enter image description here
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
$.get('Q3.csv', function(csv) {
Highcharts.data({
csv:csv,
itemDelimiter: ',',
parsed: function(columns){
var repos={},
repodata=[],
languagetypes={},
languagedata=[],
drilldownseries=[];
var seriesData=[];
$.each(columns[0],function(j,name){
//function type(i,j,name) {
//for (var i=0,j=0;i<columns.length;i++,j++)
var repo,
languagetype;
if (j>0){
repo=['libdc-for-dirk','linux','pesconvert','subsurface-for-dirk','test-tlb','uemacs'];
languagetype=columns[0][j];
if (repo[0] == 'libdc-for-dirk') {
if (!repos[repo[0]]) {
repos[repo[0]] = columns[1][j];
} else {
repos[repo[0]] += columns[1][j];
}
}
if (repo[1] == 'linux') {
if (!repos[repo[1]]) {
repos[repo[1]] = columns[2][j];
} else {
repos[repo[1]] += columns[2][j];
}
}
//}
if (repo[2] == 'pesconvert') {
if (!repos[repo[2]]) {
repos[repo[2]] = columns[3][j];
} else {
repos[repo[2]] += columns[3][j];
}
}
if (repo[3] == 'subsurface-for-dirk') {
if (!repos[repo[3]]) {
repos[repo[3]] = columns[4][j];
} else {
repos[repo[3]] += columns[4][j];
}
}
if (repo[4] == 'test-tlb') {
if (!repos[repo[4]]) {
repos[repo[4]] = columns[5][j];
} else {
repos[repo[4]] += columns[5][j];
}
}
if (repo[5] == 'uemacs') {
if (!repos[repo[5]]) {
repos[repo[5]] = columns[6][j];
} else {
repos[repo[5]] += columns[6][j];
}
}
// drilldown data
if (languagetype!== null) {
if (repo[0] == 'libdc-for-dirk') {
if (!languagetypes[repo[0]]) {
languagetypes[repo[0]] = [];
}
if(columns[1][j]!==null){
languagetypes[repo[0]].push([languagetype, columns[1][j]]);
}
}
if (repo[1] == 'linux') {
if (!languagetypes[repo[1]]) {
languagetypes[repo[1]] = [];
}
if(columns[2][j]!==null){
languagetypes[repo[1]].push([languagetype, columns[2][j]]);
}
}
if (repo[2] == 'pesconvert') {
if (!languagetypes[repo[2]]) {
languagetypes[repo[2]] = [];
}
if(columns[3][j]!==null){
languagetypes[repo[2]].push([languagetype, columns[3][j]]);
}
}
if (repo[3] == 'subsurface-for-dirk') {
if (!languagetypes[repo[3]]) {
languagetypes[repo[3]] = [];
}
if(columns[4][j]!==null){
languagetypes[repo[3]].push([languagetype, columns[4][j]]);
}
}
if (repo[4] == 'test-tlb') {
if (!languagetypes[repo[4]]) {
languagetypes[repo[4]] = [];
}
if(columns[5][j]!==null){
languagetypes[repo[4]].push([languagetype, columns[5][j]]);
}
}
if (repo[5] == 'uemacs') {
if (!languagetypes[repo[5]]) {
languagetypes[repo[5]] = [];
}
if(columns[6][j]!==null){
languagetypes[repo[5]].push([languagetype, columns[6][j]]);
}
}
}
}
});
$.each(repos, function (name, y) {
repodata.push({
name: name,
y: y,
drilldown: languagetypes[name] ? name : null
});
});
$.each(languagetypes, function (key, value) {
drilldownseries.push({
id: key,
data: value
});
});
seriesData.push(repodata);
**repodata.sort(function (a,b) {**
**if(a.y < b.y) {
return 1;
} else if (a.y > b.y) {
return -1;
}**
return 0;
});
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Different program language'
},
subtitle: {
text: 'number'
},
xAxis: {
type: 'category',
},
yAxis: {
type:'logarithmic',
minorTickInterval: 1000,
tickmarkPlacement: 'on',
title: {
text: 'Number of language'
},
},
legend: {
enabled: false
},
plotOptions: {
column: {
stacking: 'normal',
lineColor: '#666666',
lineWidth: 1,
},
series: {
data:seriesData,
borderWidth: 0,
dataLabels: {
enabled: true
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y}</b> of total<br/>'
},
series: [{
name: 'repo',
colorByPoint: true,
data: repodata,
drilldown: ''
}],
drilldown: {
type: 'treemap',
series:drilldownseries
}
})
}
});
});