谷歌图表的棘手部分具有追溯功能? [英] tricky part of google charts Column with drill down functionality?

问题描述

我正在创建google图表，并且我已经实现了排名前5位的用户柱形图，如果选择第一用户列而不是从其他变量(eachuser_data)显示第一用户页面历史数据，则可以轻松地在高图表中实现该功能！但是在谷歌图表中，我不知道添加events.addListener是否有效.让我知道Google图表在每列上提供click事件，并在同一图表绘制功能中显示其他图表. ?预先谢谢你

i am creating google charts and I already implement top 5 user column charts after that if you select first user column than displaying first user page history data from other variables(eachuser_data) its easy implement function in high charts! but in google charts, I don't know about add events.addListener work or not in this problem. let me know google charts provide click event on each column and display other graphs in same graph draw function. ? thank you in advance

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var charts = {};
  var options = {
    Column: {
      chartArea: {
        height: '100%',
        width: '100%',
        top: 24,
        left: 64,
        right: 32,
        bottom: 48,
      },
      'vAxis': {
        title: 'Cost in USD ($)', format:'$#',
      },
      height: '100%',
      legend: {
        position: 'bottom'
      },
      width: '100%'
    }
    };
  //  columns charts data
  //top 5 user data with total click 
  var jsonData = [["johan",69],["jack",23],["scott",24],["x",5],["y",10]];
  loadData(jsonData, '1', 'Column');
  //specifc user data 
   var user1 = [["report1",45],["report2",40],["index.html",50]];
   var user2 = [["report1",4],["report2",3],["index.html",5]];
   var user3 = [["report1",4],["report2",3],["index.html",5]];
   var user4 = [["report1",4],["report2",3],["index.html",5]];
   var user5 = [["report1",4],["report2",3],["index.html",5]];
 


  // load json data
  function loadData(jsonData, id, chartType) {
    // create data table
    var dataTable = new google.visualization.DataTable();

       // add date column
       dataTable.addColumn('string', 'Total numbe of click');
       var rowIndex = dataTable.addRow();
       dataTable.setValue(rowIndex, 0, dataTable.getColumnLabel(0));
       $.each(jsonData, function(productIndex, product) {
        var colIndex = dataTable.addColumn('number', product[0]);
          // add product data
          dataTable.setValue(rowIndex, colIndex, product[1]);
        });
         // draw chart
    $(window).resize(function () {
      drawChart(id, dataTable);
    });
    drawChart(id, dataTable);
  }


  function drawChart(id, dataTable) {
    if (!charts.hasOwnProperty(id)) {
      charts[id] = new google.visualization.ChartWrapper({
        chartType: 'ColumnChart',
        containerId: 'chart-' + id,
        options:  {
          vAxis: {
            title: 'Cost in USD ($)',
            format: '$#',
          },
          width: '100%',
          height: '100%',
          legend: {
            position: 'bottom'
          },
        },
      });
    }
     charts[id].setDataTable(dataTable);
    charts[id].draw();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart-1"></div>

推荐答案

以了解已单击/选择的列，
监听'select'事件

to know which column has been clicked / selected,
listen for the 'select' event

google.visualization.events.addListener(chart, 'select', chartSelection);

然后使用图表方法getSelection()获取所选列的行索引和列索引
getSelection将返回对象数组

then use chart method getSelection() to get the row and column index of the column selected
getSelection will return an array of objects

[{row: 0, column: 1}]

在选择列和未选择列时，都会触发select事件.
确保检查getSelection()
返回的数组的长度 尝试访问数组内容之前

the select event will fire both when a column is selected and un-selected
be sure to check the length of the array return by getSelection()
before trying to access the array contents

对于柱形图，一次只能选择一列
因此选择的值将始终是数组中的第一个元素

for column charts, only one column can be selected at a time
so the values of the selection will always be the first element in the array

function chartSelection() {
  var selection = chart.getSelection();
  if (selection.length > 0) {
    var row = selection[0].row;
    var col = selection[0].column;
    var xValue = data.getValue(row, 0);
    var yValue = data.getValue(row, col);
    console.log('selection: ' + xValue + ' = ' + yValue);
  } else {
    console.log('nothing selected');
  }
}

请参阅以下工作摘要...

see following working snippet...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['x', 'y0', 'y1'],
    ['A', 6, 7],
    ['B', 7, 9],
    ['C', 8, 11],
    ['D', 9, 11],
    ['E', 5, 6]
  ]);

  var options = {
    legend: {
      alignment: 'end',
      position: 'top'
    }
  };

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

  google.visualization.events.addListener(chart, 'select', chartSelection);

  function chartSelection() {
    var selection = chart.getSelection();
    if (selection.length > 0) {
      var row = selection[0].row;
      var col = selection[0].column;
      var xValue = data.getValue(row, 0);
      var yValue = data.getValue(row, col);
      console.log('selection: ' + xValue + ' = ' + yValue);
    } else {
      console.log('nothing selected');
    }
  }

  chart.draw(data, options);
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

这篇关于谷歌图表的棘手部分具有追溯功能?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！