时间戳

首页 > 解决方案 > 具有向下钻取功能的谷歌图表列的棘手部分？

javascript - 具有向下钻取功能的谷歌图表列的棘手部分？

问题描述

我正在创建谷歌图表，之后我已经实现了前 5 个用户柱形图，如果您选择第一个用户列而不是显示来自其他变量（每个用户数据）的第一个用户页面历史数据，它在高图表中的简单实现功能！但在谷歌图表中，我不知道在这个问题中添加 events.addListener 是否工作。让我知道谷歌图表在每列上提供点击事件，并在同一图表绘制功能中显示其他图表。? 先感谢您

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>

标签： javascriptjquerychartsgoogle-visualization

解决方案

要知道单击/选择了哪个列，
请侦听'select'事件 

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

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

[{row: 0, column: 1}]

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

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

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

请参阅以下工作片段... 

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>

推荐阅读