Диаграммы детализации в angular js с использованием директив Google Charts

Мы новичок в angularjs v4. У нас есть требования к детализации диаграмм в диаграммах Google. Мы используем директивы ng2-google-charts. Мы можем найти событие выбора и обновить данные. но график не перезагружается. Может ли кто-нибудь помочь в этом.

представление: 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();
  }

Заранее спасибо.


angularjs google-visualization angularjs-directive drilldown using-directives
person VenkateshKoona    schedule 05.10.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Как и в случае с highcharts, в диаграммах 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');
                    }

                }
            }

Теперь нарисуйте диаграмму с прикрепленным событием выбора обработчика.

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

Вот и все. Теперь все, что вам нужно сделать, это объявить три разные функции для 3 тактов.

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

вы можете найти полный код и работающую скрипту здесь

person Vijay Bhosale    schedule 11.10.2017