Drilldown-Diagramme in eckigen js mit google charts Direktiven

Question

Wir sind neu bei angularjs v4. Wir haben eine Anforderung von Drilldown-Charts in Google-Charts. Wir verwenden ng2-google-charts-Direktiven. Wir können das ausgewählte Ereignis finden und die Daten aktualisieren. aber das Diagramm wird nicht neu geladen. Könnte jemand bitte dabei helfen.

Ansicht: index.html

<pre> 
    <br/> 
    <google-chart #drillchart [data]='pieChartData' type="BarChart" (chartSelect)='select($event)'> 
    </google-chart> 
</pre> 

Component.ts:

pieChartData = { 

    chartType: 'BarChart', 
    dataTable: [ 
     ['Country', 'Poulation'], 
     ['Ind', 25], 
     ['Rus', 10], 
     ['Chi', 30], 
     ['USA', 15], 
     ['UK', 12], 
     ['Aus', 8] 
    ], 
    options: {'title': 'Population'} 

    }; 

newDataIndia = [ 

    ['State', 'Poulation'], 
    ['AndhraPradesh', 30], 
    ['UttarPradesh',  40], 
    ['MadyaPradesh', 10], 
    ['Karnataka', 10], 
    ['Tamilnadu', 10] 
    ]; 

    newDataUS = [ 

    ['State', 'Poulation'], 
    ['Texas', 30], 
    ['Florida',  40], 
    ['Pennsylvania', 10], 
    ['Lousiana', 15], 
    ['Colorado', 10] 
    ]; 

public changeData(data):void { 

    /*let dataTable = this.drillchart.wrapper.getDataTable(); 
    for (let i = 0; i < 6; i++) { 
     dataTable.setValue(i, 1, Math.round(Math.random() * 1000)); 
     dataTable.setValue(i, 2, Math.round(Math.random() * 1000)); 
    }*/ 
    let dataTable = this.drillchart.wrapper.getDataTable() 
    console.log(dataTable); 
    dataTable.Sf[0].label = data[0][0]; 
    dataTable.Sf[0].type = "string"; 
    dataTable.Sf[1].label = data[0][1]; 
    dataTable.Sf[1].type = "number"; 

    for (let i = 0; i < data.length-1; i++) { 
     dataTable.Tf[i].c[0].v = data[i+1][0]; 
     dataTable.Tf[i].c[1].v = data[i+1][1]; 
    } 

    if(dataTable.Tf.length < data.length-1) 
    { 
     for(var icount = data.length-1; icount != data.length-1; icount--) { 
     dataTable = dataTable.Tf.pop(); 
     } 
    } 

    this.drillchart.redraw(); 
    } 

Vielen Dank im Voraus.

Answer 1

Wie Highcharts gibt es keinen einfachen Weg in Google-Charts, um Drilldown zu machen. Aber mit ein paar Tricks ist es möglich,

Nehmen Sie eine Schaltfläche "Zurück" und einen Container, um Diagramm zu zeichnen. Jetzt ist Ihre Visualisierungsbibliothek Balkendiagramme laden und erstellen Sie Ihre Balkendiagramm

google.charts.load('current', { packages: ['corechart', 'bar'] }); 
google.charts.setOnLoadCallback(drawAnnotations); 
    function drawAnnotations() { 
     google.charts.setOnLoadCallback(drawSkillBar); 

     function drawSkillBar() { 

      var data = new google.visualization.DataTable(); 


      data.addColumn('string', 'Category'); 
      data.addColumn('number', 'Demand'); 
      data.addColumn({ type: 'number', role: 'annotation' }); 
      data.addColumn('number', 'Supply Overall'); 
      data.addColumn({ type: 'number', role: 'annotation' }); 
      data.addColumn('number', 'Bench and Buffer'); 
      data.addColumn({ type: 'number', role: 'annotation' }); 

      data.addRows([ 
       ['Core', 25, 25, 22, 22, 12, 12], 
       ['Invest', 15, 15, 21, 21, 11, 11], 
       ['Others', 10, 10, 12, 12, 9, 9] 
      ]); 

      var options = { 
       title: '', 
       //hAxis: { 
       // title: 'Time of Day', 
       //}, 
       //vAxis: { 
       // title: 'Rating (scale of 1-10)' 
       //}, 
       is3D: true, 
       'height': 300, 
       'width': 600, 
       colors: ['#3366CC', '#378eb8', '#984ea3'], 
       legend: 'true', 
       //focusTarget: 'category', 
       animation: { 
        startup: true, 
        duration: 500, 
        easing: 'out' 
       } 
      }; 


      var chart = new google.visualization.ColumnChart(document.getElementById('SkillBar')); 

Erstellen Sie Ihre Auswahlhandler wie diese

function selectHandler() { 
       var selectedItem = chart.getSelection()[0]; 

       if (selectedItem && selectedItem.row != null) { 
        var value = data.getValue(selectedItem.row, selectedItem.column); 
        var column = data.getColumnLabel(selectedItem.column) 

        if (column.toLowerCase() == 'demand') { 
         $('#btnBack').removeClass('hidden'); 
         drawDemandBar(data.getValue(selectedItem.row, 0), '#3366CC'); 
        } 
        if (column.toLowerCase() == 'supply overall') { 
         $('#btnBack').removeClass('hidden'); 
         drawSupplyBar(data.getValue(selectedItem.row, 0), '#378eb8'); 
        } 
        if (column.toLowerCase() == 'bench and buffer') { 
         $('#btnBack').removeClass('hidden'); 
         drawOthersBar(data.getValue(selectedItem.row, 0), '#984ea3'); 
        } 

       } 
      } 

jetzt Ihr Diagramm mit ausgewählten Event-Handler zeichnen angebracht

google.visualization.events.addListener(chart, 'select', selectHandler); 
      chart.draw(data, options); 

Thats it .. Jetzt müssen Sie nur noch drei verschiedene Funktionen für 3 Balken deklarieren:

1. drawSupplyBar() 2. drawDemandBar() 3. drawOthersBar() 

finden Sie den vollständigen Code und die Arbeit Geige Here