2017-08-01 4 views
0

Ich möchte mein Diagramm in einen anderen Container aufreißen. Ich habe 3 bis 4 Drilldown-Ebenen in meinem Diagramm und möchte, dass alle in verschiedenen Containern angezeigt werden. Wie kann ich tun, dass auf einfachste Weise ohne Verdoppelungen in meinem Code zu machen und ohne dass es HighChart Aufreißen Beispiel kann complex.` Wie kann ein Kreis-Highchart mit renderTo oder Redraw-Methode in mehrere Container unterteilt werden?

</head> 
<body> 

     <div id="container0" style="min-width: 900px; height: 500px; margin: 0 "></div> 
     <div id="container1" style="min-width: 900px; height: 300px; margin: 0 "></div> 
     <div id="container2" style="min-width: 900px; height: 100px; margin: 0 "></div> 

    <script> 
     var chartType; 
     function getTitle() 
      { 
      var e = document.getElementById("getTitleId"); 
      chartType = e.options[e.selectedIndex].value; 
      return chartType; 
      } 
     var defaultTitle = "Sales Summary [Quarterly]"; 
     var drilldownTitle = " Sales"; 
     var chart = Highcharts.chart({ 
        chart: { 
         renderTo: 'container0', 
         type: 'pie', 
         marginLeft:120, 
         options3d: { 
             enabled: true, 
             alpha: 45, 
             beta: 0 
            }, 
         events: { 
          drilldown: function(e) { 
           chart.setTitle({ text: e.point.name + drilldownTitle }); 



          }, 
          drillup: function(e) { 
           chart.setTitle({ text: defaultTitle }); 
          } 
         } 
        }, 
        title: { 
     text:defaultTitle 
    }, 
    credits : { 
     enabled : false 
    }, 
     events:{ 
     drilldown: function(e) 
     { 

      chart.setTitle({text: e.point.name}, {text: ''}); 

     }, 
     drillup: function(e){ 
      if(e.seriesOptions.name == topLevelSeriesName) { 
       chart.setTitle({text: topLevelTitle}, {text: topLevelSubtitle}); 
      } 
      else { 
       chart.setTitle({text: e.seriesOptions.name}, {text: ''}); 
      } 
     } 

}, 

      xAxis: { 
     type: 'category' 
    }, 


    tooltip: { 
     pointFormat: `{point.tooltips}<br>Sales:{point.y}</b>` 
    }, 

    plotOptions: { 
     showInLegend: true, 



     pie: {allowPointSelect: true, 
     depth: 35,}, 
     series: { 
      borderWidth: 50, 
      dataLabels: { 
       enabled: true, 
      } 
     } 
    }, 
    series: [{ 
     type:'pie', 
     name: 'Quarterly', 
     colorByPoint: true, 
     data: [ 
     { 
      name: 'QUARTER 1', 
      y:3061997, 
      drilldown: 'quarter1' 
     }, 
     { 
      name: 'QUARTER 2', 
      y:56608868, 
      drilldown: 'quarter2' 
     } 
     ] 
    }], 

    drilldown: { 
     drillUpButton: { 
          relativeTo: 'spacingBox', 
          position: { 
           y: 0, 
           x: 0 
          },}, 
     series: [ 

      { 
      id: 'quarter1', 
      name: 'MONTHLY', 
      data: [ 

      { 
       name:'FEBRUARY', 
       y:139353, 



       drilldown: 'february' 
      }, 
      { 
       name:'MARCH', 
       y:2922643, 
       drilldown: 'march' 
      } 
      ] 
     }, 
     { 
      type:'pie', 
      id: 'quarter2', 
      name: 'MONTHLY', 
      data: [ 
      { 
       name: 'APRIL', 
       y:21781659, 
       drilldown: 'april' 
      }, 
      { 
       name:'MAY', 
       y:19387600, 
       drilldown: 'may' 
      }, 
      { 
       name:'JUNE', 
       y:15439608, 
       drilldown: 'june' 
      } 
      ] 
     } 
] 
    } 






     }); 
    </script> 
</body> 

` Wie Ich Drilldown dieses Diagramm in verschiedenen Container bei jedem Klick Ereignis Drilldown?

Hier ist der Link zu jsfiddle

+0

Was meinst du mit Drill-Down in einen anderen Behälter? Was passiert mit dem Container, aus dem der Klick stammt? Versuchen Sie, eine Drilldown-Aktion für ein Diagramm anzuwenden, um einen Filter für ein anderes Diagramm anzuwenden? – ewolden

+0

Nichts passiert mit dem ursprünglichen Conatiner. Es dient nur als eine Quelle für den Drilldown in den neuen Container geladen werden .. – Lalit

Antwort

Verwandte Themen