2014-04-18 17 views
14

Highchart'ta birçok düzeyde Drilldown'u kullanmayı seviyoruz. Highchart'ta zaten bir örnek var mı?Drilldown çoklu düzeyler Highchart

Şu anda kullanılan kod:

$(div).highcharts({ 
    chart: {type: 'column'}, 
    credits: {enabled: false},   
    title: {text: title}, 
    xAxis: { 
     categories: [ 
      'Instroom', 
      'Rijdend', 
      'Úitstroom' 
     ] 
    }, 
    yAxis: {title: {text: ytitle}}, 
    legend: {enabled: true}, 
    plotOptions: {series: { borderWidth: 1, dataLabels: {enabled: true,}}}, 
    series: first, 
    drilldown: { 
     series: drillDownObject(second) 
    } 
}); 
Sen mutilple matkap çıkışlar için özel bir kod yazmak zorunda

cevap

26

Grafik ve benzeri, tüm drilldown serilerini ekleyip nokta ve sondaj arasındaki bağlantıyı oluşturabilirsiniz. Bkz: Bir mutiple seviyeleri pasta grafiği için http://jsfiddle.net/6LXVQ/2/

series: [{ 
     name: 'Things', 
     colorByPoint: true, 
     data: [{ 
      name: 'Animals', 
      y: 5, 
      drilldown: 'animals' 
     }] 
    }], 
    drilldown: { 
     series: [{ 
      id: 'animals', 
      name: 'Animals', 
      data: [{ 
       name: 'Cats', 
       y: 4, 
       drilldown: 'cats' 
      }, ['Dogs', 2], 
       ['Cows', 1], 
       ['Sheep', 2], 
       ['Pigs', 1] 
      ] 
     }, { 

      id: 'cats', 
      data: [1, 2, 3] 
     }] 
    } 
+1

Burada biraz örnek geliştirdim: http://jsfiddle.net/ed3ob9au/ –

+0

Hayvanların 2 çocuğu varsa ve bu çocukların her biri 2 çocuğu varsa nasıl yaparım? – Julian

+0

İstediğiniz kadar matkap ekleyebilirsin, örneğin: http://jsfiddle.net/ed3ob9au/107/ –

0

, Her sütunlardaki veriler serisini (ilk grafikler) depolamak ve sonrakine bu dizi geçirerek bunu başarabilirsiniz

+0

Teşekkür ancak onun yerine haritaların çubuklarını kullanmak ister ...:

Keşfi seçenekleri (Keşfi "Hayvanlar"> "Memeliler" çalışır) şöyle – JelleP

4

http://jsfiddle.net/bge14m3a/1/

$(function() { 

    // Create the chart 
    $('#container').highcharts({ 
     chart: { 
      type: 'pie' 
     }, 
     title: { 
      text: 'Deep drilldown' 
     }, 
     xAxis: { 
      type: 'category' 
     }, 

     legend: { 
      enabled: false 
     }, 

     plotOptions: { 
      series: { 
       borderWidth: 0, 
       dataLabels: { 
        enabled: true, 
       } 
      } 
     }, 

     series: [{ 
      name: 'Things', 
      colorByPoint: true, 
      data: [{ 
       name: 'Animals', 
       y: 5, 
       drilldown: 'animals' 
      },{ 
       name: 'Food', 
       y: 4, 
       drilldown: 'food' 
      }] 
     }], 
     drilldown: { 
      series: [{ 
       id: 'food', 
       name: 'Food', 
       data: [{ 
        name: 'Apple', 
        y: 1.5, 
        drilldown: 'apple' 
       }, 
        ['Banana', 1], 
        ['Peer', 0.5], 
        ['Pineapple', 1] 
       ] 
      }, { 

       id: 'apple', 
       data: [['1/6' ,1], 
         ['1/3' , 2], 
         ['1/2' , 3]] 
      },{ 
       id: 'animals', 
       name: 'Animals', 
       data: [{ 
        name: 'Cats', 
        y: 5, 
        drilldown: 'cats' 
       }, ['Dogs', 2], 
        ['Cows', 1], 
        ['Sheep', 1], 
        ['Pigs', 1] 
       ] 
      }, { 

       id: 'cats', 
       data: [1, 2, 3] 
      }] 
     } 
    }) 
}); 
+0

Harika çalışıyordu. Teşekkürler Kass. – Kings

2
<script src="js/jquery-2.0.2.min.js"></script> 
    <script src="js/highcharts.js"></script> 
    <script src="js/drilldown.js"></script> 
    <script> 
     var chartSeriesData = []; 
    var chartDrilldownData = []; 

$.ajax({ 
type: 'GET', 
url: 'abc.json', 
success: function(data) { 


    var agentJson = data; 

    for (var i = 0;i <agentJson.countryInfo.length; i++) 

     { 

     var series_name = agentJson.countryInfo[i].name; 
     var drill_id = agentJson.countryInfo[i].drilldown; 
     var series_data = agentJson.countryInfo[i].y; 

     var drill_data = agentJson.countryInfo[i].data; 


       chartSeriesData.push({ 
       name: series_name, 
       y: parseFloat(series_data), 
       drilldown : drill_id          
       }); 


     chartDrilldownData.push({ 
      data : drill_data, 
      id: drill_id, 
      name: series_name, 

     }); 


     } 

    /// END FOR LOOP 


    $('#countryInfo').highcharts({ 

     credits: { 
      enabled: false 
     }, 

     chart: { 
      type: 'pie', 
      backgroundColor:'rgba(255, 255, 255, 0.1)' 
     }, 
     title: { 
      text: 'Human Resources' 
     }, 

     subtitle: { 
      text: '' 
     }, 
     plotOptions: { 
      series: { 
       cursor: 'pointer', 
       dataLabels: { 
        enabled: true, 
        format: '{point.name}: {point.y:.1f}%', 
        style: { 
         color: '#000', 
         fontWeight: 'bold', 
         fontSize: '12px', 
         textShadow: "0px #ffffff" 

        } 
       } 
      } 
     }, 

     tooltip: { 
      headerFormat: '<span style="font-size:11px">{series.name}</span><br>', 
      pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>' 
     }, 
     series: [{ 
      name: 'Country', 
      colorByPoint: true, 
      data: chartSeriesData 
     }], 
     drilldown: { 
      series: chartDrilldownData 
      } 
    }); 



} 


}); 


    </script> 


and your json file look likes: 

{"countryInfo":[{"name":"Firefox","y":4,"drilldown":"Firefox","data":[["desktop",1]]},{"name":"Chrome","y":176,"drilldown":"Chrome","data":[["desktop",1],["desktop",18]]}]} 
-1

this.EixoX = ["Jun/2016","Jul/2016","Ago/2016","Set/2016","Out/2016","Nov/2016","Dez/2016"]; 
 
\t this.EixoY = "Reais"; 
 
\t this.Class = "DivGraficoLinhaDoTempo"; 
 
\t this.Titulo = "Média de Vendas por Equipe"; 
 
\t this.Subtitulo; 
 
\t this.ValoresBarras =[{ 
 
\t \t \t \t name:"ECLEIA", 
 
\t \t \t \t data: [30000, 32000, 54000, 50000, 54000, 50000], //JAN, FEV, MAR, ABR, MAY, JUN 
 
\t \t \t \t vendedores: [{name:"ECLEIAv1",data:[32000,40005,40005,27002,20002,70001]},{name:"ECLEIAv2",data:[30000,55000,45000,22000,32000,33001]}] 
 
\t \t \t \t },{ 
 
\t \t \t \t name:"JOANA", 
 
\t \t \t \t data: [43000, 12000, 34000, 4000, 30004, 4000], 
 
\t \t \t \t vendedores: [{name:"JOANAv1",data:[72000,55005,70005,90002,70002,50001]},{name:"JOANAv2",data:[22000,50005,40005,40002,30002,66001]}] 
 
\t \t \t \t },{ 
 
\t \t \t \t name:"GABRIELE", 
 
\t \t \t \t data: [22000, 22000, 34000, 20004, 30004, 4000], 
 
\t \t \t \t vendedores: [{name:"GABRIELEv1",data:[11000,30005,60005,40002,30002,30001],vendedores: [{name:"GABRIELEv1SUB1",data:[11000,30005,60005,40002,30002,30001]},{name:"GABRIELEv1SUB2",data:[60000,50005,40005,24502,55502,70001]}]},{name:"GABRIELEv2",data:[60000,50005,40005,24502,55502,70001]}] 
 
\t \t \t \t },{ 
 
\t \t \t \t name:"FRANCISCO", 
 
\t \t \t \t data: [54000, 12000, 30004, 4000, 30004, 4000], 
 
\t \t \t \t vendedores: [{name:"FRANCISCOv1",data:[52000,60005,20005,11002,66002,40001]},{name:"FRANCISCOv2",data:[50000,56005,40005,25002,30002,38001]}] 
 
\t \t \t \t }]; 
 
     
 
\t this.ValoresLinha = [{ 
 
\t \t \t \t name:"MÉDIA", 
 
\t \t \t \t data: [54000, 12000, 30004, 4000, 30004, 4000] 
 
\t \t \t 
 
\t \t \t \t }]; 
 
\t //ATRIBUTOS AUXILIARES 
 

 
\t this.nivel; 
 
\t this.indexmes; 
 
\t this.indexvendedor; 
 
\t this.drilldownniveis; 
 
\t var drilldownTitle = "Equipe de "; 
 

 

 
\t ///UserCodeRegionStart:[User Functions] (do not remove this comment.) 
 
\t var _this = this; 
 
\t //var vetorNomesX \t = []; 
 

 
    var colors = Highcharts.getOptions().colors; 
 

 
\t \t $(function() { 
 
\t \t \t Highcharts.Tick.prototype.drillable = function() {}; //REMOVE LINKS DOS LABELS DO EIXO X(mes), pois cada mes possui "n" vendedores 
 
\t \t \t var options = { 
 
\t \t \t \t type:"column", 
 
\t \t \t \t chart: { 
 
\t \t \t \t \t renderTo: "container", 
 
\t \t \t \t \t events: { 
 
\t \t \t \t \t \t \t drilldown: function(e) { 
 
\t \t \t \t \t \t \t \t //console.log(e.point); 
 
\t \t \t \t \t \t \t \t \t chart.setTitle({ text: drilldownTitle + e.point.name }); 
 
\t \t \t \t \t \t \t }, 
 
\t \t \t \t \t \t \t drillup: function(e) { 
 
\t \t \t \t \t \t \t \t \t chart.setTitle({ text: _this.Titulo }); 
 
\t \t \t \t \t \t \t } 
 
\t \t \t \t \t } 
 
\t \t \t \t }, 
 
\t \t \t \t title: { 
 
\t \t \t \t \t text: _this.Titulo 
 
\t \t \t \t }, 
 
\t \t \t \t subtitle: { 
 
\t \t \t \t \t text: _this.Subtitulo 
 
\t \t \t \t }, 
 
\t \t \t \t xAxis: { 
 
\t \t \t \t \t categories: _this.EixoX 
 
\t \t \t \t }, 
 
\t \t \t \t yAxis: { 
 
\t \t \t \t \t labels: { 
 
\t \t \t \t \t \t formatter: function() { 
 
\t \t \t \t \t \t \t return Highcharts.numberFormat(this.value,0); 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t }, 
 
\t \t \t \t \t title: { 
 
\t \t \t \t \t \t text: _this.EixoY 
 
\t \t \t \t \t } 
 
\t \t \t \t }, 
 
\t \t \t \t plotOptions: { 
 

 
\t \t \t \t \t column: { 
 
\t \t \t \t \t \t \t \t \t \t \t cursor: "pointer", 
 
\t \t \t \t \t \t \t \t \t \t \t point: { 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t events: { 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t click: function (e) { 
 

 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t _this.indexmes = e.point.x; 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t _this.indexvendedor = e.point.series.columnIndex; 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t //LÓGICA PARA AVANÇO DE NIVEIS 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t if(_this.drilldownniveis){ 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t chart.setTitle({ text: drilldownTitle + _this.drilldownniveis[_this.indexvendedor].name }); 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t _this.drilldownniveis = _this.drilldownniveis[_this.indexvendedor].drilldown; 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t }else{ 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t chart.setTitle({ text: drilldownTitle + options.series[_this.indexvendedor].name }); 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t _this.drilldownniveis = options.series[_this.indexvendedor].data[_this.indexmes].drilldown; 
 

 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t if(options.series[_this.indexvendedor].data[_this.indexmes].drilldown.length<=0){ //SE drilldown = 0 mesma coisa que não ter (undefined), então seto null! 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t _this.drilldownniveis = null; 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t } 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t } 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t //setChart de acordo com novas variaveis 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t if (_this.drilldownniveis) { // drill down 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t if(_this.drilldownniveis.length<=0){ 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t _this.drilldownniveis = options.series; 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t } 
 

 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t var media = new Array(0,0,0,0,0,0,0); //ZERA ARRAY PARA PODER SOMAR VALORES 
 

 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t for(var x=0;x<_this.EixoX.length;x++){ 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t $(_this.drilldownniveis).each(function(index, el) { 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t media[x] += el.data[x]; 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t }); 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t } 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t for(var x=0;x<_this.EixoX.length;x++){ 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t media[x] = media[x]/_this.drilldownniveis.length; 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t } 
 

 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t _this.drilldownniveis.push({ 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t "name": "MÉDIA", 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t "type":"spline", 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t "data": media 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t }); 
 

 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t setChart(null, _this.EixoX, _this.drilldownniveis, null, 1); 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t _this.drilldownniveis.pop(); 
 

 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t } else if(!_this.drilldownniveis){ // restore 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t chart.setTitle({ text: _this.Titulo }); 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t setChart(null, _this.EixoX,options.series, null,2); 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t }else if(options.series){ // NÃO VAI ENTRAR AQUI 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t setChart(null, _this.EixoX,options.series, null,2); 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t } 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t } 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t } 
 
\t \t \t \t \t \t \t \t \t \t \t } 
 
\t \t \t \t \t \t \t \t \t } 
 
\t \t \t \t }, 
 
\t \t \t \t legend: { 
 
\t \t \t \t \t layout: "horizontal", 
 
\t \t \t \t \t align: "right", 
 
\t \t \t \t \t verticalAlign: "bottom", 
 
\t \t \t \t \t floating: false, 
 
\t \t \t \t \t borderWidth: 0 
 
\t \t \t \t }, 
 
\t \t \t \t credits: { 
 
\t \t \t \t \t enabled: false 
 
\t \t \t \t }, 
 
\t \t \t \t series: [] 
 
\t \t \t \t // drilldown: { 
 
\t \t \t \t // \t series: drill_down_data 
 
\t \t \t \t // } 
 
\t \t \t }; 
 

 
\t \t \t function setChart(name, categories, series, color, tipo) { 
 

 
\t \t \t \t if(series.length<=0){ 
 

 
\t \t \t \t }else{ 
 

 
\t \t \t     chart.xAxis[0].setCategories(categories); 
 
\t \t \t     while (chart.series.length > 0) { 
 
\t \t \t      chart.series[0].remove(true); 
 
\t \t \t     } 
 
\t \t \t \t \t \t \t \t \t \t for (var i = 0; i < series.length; i++) { 
 
\t \t \t \t \t \t \t \t \t \t \t \t var tipocolumn="column"; 
 
\t \t \t \t \t \t \t \t \t \t \t \t var marcador=[]; 
 

 
\t \t \t \t \t \t \t \t \t \t \t \t if(i==series.length-1){ 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t tipocolumn="spline"; 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t marcador= { 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t lineWidth: 2, 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t symbol: "circle", 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t lineColor: Highcharts.getOptions().colors[3], 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t fillColor: "white" 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t }; 
 
\t \t \t \t \t \t \t \t \t \t \t \t } 
 
\t \t \t \t \t \t \t \t \t \t // \t chart.setTitle({ text: _this.Titulo }); 
 
\t \t \t      chart.addSeries({ 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t type: tipocolumn, 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t marker: marcador, 
 
\t \t \t       name: series[i].name, 
 
\t \t \t       data: series[i].data, 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t drilldown: series[i].drilldown, 
 
\t \t \t       color: colors[i] 
 
\t \t \t      }); 
 
\t \t \t     } 
 
\t \t \t \t \t \t \t \t \t \t } 
 

 
\t \t \t    } 
 

 
//INICIALIZAÇÃO DAS SERIES DO Highcharts 
 
$(_this.ValoresBarras).each(function(index, el) { 
 
\t var drilldownseries =[]; 
 

 
\t var series = { 
 
\t \t name: el.name, 
 
\t \t type: "column", 
 
\t \t data: [] 
 
\t \t \t \t }; 
 
\t \t \t for(var count=0;count<_this.EixoX.length;count++){ 
 

 
\t \t \t \t series.data.push({ 
 
\t \t \t \t \t \t "name": el.name, 
 
\t \t \t \t \t \t "y": el.data[count], 
 
\t \t \t \t \t \t "colors": colors[index], 
 
\t \t \t \t \t \t "drilldown": drilldownseries 
 
\t \t \t \t }); 
 
\t \t \t } 
 

 
\t \t \t \t $(el.vendedores).each(function(index2, vendedor) { 
 
\t \t \t \t \t drilldownseries.push({ 
 
\t \t \t   "name" : vendedor.name, 
 
\t \t \t   "data" : vendedor.data, 
 
\t \t \t \t \t \t \t "drilldown": vendedor.vendedores 
 
\t \t \t \t \t \t \t }); 
 
\t \t \t \t }); 
 

 
\t options.series.push(series); 
 
}); 
 

 
$(_this.ValoresLinha).each(function(index, el) { 
 
\t \t var series = { 
 
\t \t \t type: "spline", 
 
\t \t \t name: "", 
 
\t \t \t data: [], 
 
\t \t \t marker: { 
 
\t \t \t \t lineWidth: 2, 
 
\t \t \t \t lineColor: Highcharts.getOptions().colors[3], 
 
\t \t \t \t fillColor: "white", 
 
\t \t \t } 
 
\t \t }; 
 
\t \t series.name = el.name; 
 
\t \t series.data = el.data; 
 
\t \t options.series.push(series); 
 
\t }); 
 

 

 

 
\t \t \t var chart = new Highcharts.Chart(options); 
 
\t \t \t /*$("#" + obj).highcharts({ 
 
\t \t \t });*/ 
 
\t \t }); 
 

 
\t ///UserCodeRegionEnd: (do not remove this comment.):
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script> 
 
<script src="http://code.highcharts.com/highcharts.js"></script> 
 
<script src="http://code.highcharts.com/modules/exporting.js"></script> 
 
<script src="http://code.highcharts.com/modules/drilldown.js"></script> 
 

 
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"> 
 

 
</div>
herkes ihtiyacı varsa ben, çok seviyeli, çok Ayrıntıya Gitme oluştur kontrol :

[http://jsfiddle.net/alissondiel/vNfWk/253/][1] 
1

Burada, eksendeki adları koruyan bir örnek verilmiştir. Yorumlarınız için

drilldown: { 
    series: [{ 
    id: 'animals', 
    data: [{ 
     name: 'Mammals', 
     y: 4, 
     drilldown: 'mammals' 
     }, 
     ['Reptiles', 2], 
     ['Vertebrates', 1] 
    ] 
    }, { 
    id: 'mammals', 
    data: [['Cats', 3], ['Dogs', 2], ['Platypus', 1]] 
    }, 
    ... 

http://jsfiddle.net/vcsqnr2z/

İlgili konular