使用google圖表指令在角度js中鑽取圖表

我們是angularjs v4的新手。我們需要在Google圖表中顯示深入圖表。我們正在使用ng2-google-charts指令。我們能夠找到選擇事件並更新數據。但圖表不重新加載。任何人都可以幫助解決這個問題。使用google圖表指令在角度js中鑽取圖表

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

預先感謝。

來源

2017-10-05 VenkateshKoona

就像高圖一樣，谷歌圖表中沒有任何簡單的方法可以進行深入分析。但也有一些技巧，可以

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

       } 
      }

現在繪製圖表與選擇處理程序事件連着

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

完蛋了..現在你所要做的就是宣佈3個不同的功能3個酒吧

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

你可以找到完整的代碼和工作小提琴Here

來源

2017-10-11 07:24:43

使用google圖表指令在角度js中鑽取圖表

回答

相關問題