Google 차트 지시문을 사용하여 각도 j의 드릴 다운 차트

Question

우리는 angularjs v4를 처음 사용합니다. 우리는 Google 차트에 드릴 다운 차트가 필요합니다. ng2-google-charts 지시문을 사용하고 있습니다. 우리는 select 이벤트를 찾고 데이터를 업데이트 할 수 있습니다. 차트는 다시로드되지 않습니다. 어느 누구도이 문제에 도움을받을 수 있습니까?

보기 : 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(); 
    } 

감사합니다.

Answer 1

하이 차트와 마찬가지로 드릴 다운을 수행하기위한 Google 차트에는 간단한 방법이 없습니다. 하지만 몇 가지 트릭이 가능합니다.

<input type="button" style="width: auto !important;" value="back" id="btnBack" /> 
<div id="SkillBar"></div> 

차트를 그리려면 뒤로 버튼과 컨테이너를 가져 가십시오. 지금 주문 선택 핸들러 이벤트와 차트를 그릴이

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'); 
        } 

       } 
      } 

같이 당신의 선택 핸들러를 작성

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')); 

당신의 막대 차트

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

그게 부착 시각화 라이브러리 막대 차트를로드 만들고 그것을 .. 이제 3 개의 막대에 대해 세 가지 다른 함수를 선언하면됩니다.

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

전체 코드 및 작동 방식을 찾을 수 있습니다. Here