Googleチャートディレクティブを使用した角度jのドリルダウンチャート

Question

anglejs v4は新しく追加されました。私たちは、ドリルダウンチャートの要件をGoogleのチャートで持っています。 Googleではng2-google-chartsディレクティブを使用しています。 selectイベントを見つけてデータを更新することができます。チャートはリロードされません。いずれにせよこのことを助けてくれますか？

ビュー：事前に

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

ありがとう：

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

Component.ts index.htmlを。

Answer 1

ハイチャートのように、ドリルダウンを行うためのGoogleチャートでの簡単な方法はありません。しかし、いくつかのトリックでそれは可能です

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

戻るボタンとグラフを描画するためのコンテナを取る。今すぐあなたの可視化ライブラリ棒グラフをロードし、

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

あなたの棒グラフを作成今すぐ選択ハンドライベントであなたのチャートを描画、このようなあなたの選択ハンドラ

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

       } 
      } 

を作成し、それのthats

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

を添付..あなたがしなければならないことは、3小節の3つの異なる機能を宣言することです。

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

あなたは完全なコードと作業フィルドを見つけることができますHere