如何使用下钻对高级图表中的系列进行排序?

时间:2018-03-10 13:49:08

标签: javascript highcharts

我有一个关于如何使用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
                }
                
            })

       }
    });
    });
 
关于排序,如何设置?

0 个答案:

没有答案