хитрая часть гугл-чартов Колонка с функцией детализации? - PullRequest
Новая
       2

хитрая часть гугл-чартов Колонка с функцией детализации?

0 голосов
/ 25 июня 2018

Я создаю диаграммы Google и уже внедряю топ-5 диаграмм пользовательских столбцов после этого, если вы выберете первый пользовательский столбец, чем отображение данных истории первых пользовательских страниц из других переменных (eachuser_data), это простая функция реализации в верхних диаграммах!но в гугл-чартах я не знаю, работают ли add events.addListener или нет в этой проблеме.дайте мне знать, Google диаграммы предоставляют событие клика в каждом столбце и отображают другие графики в той же функции рисования графиков.?заранее спасибо 

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>

1 Ответ

0 голосов
/ 25 июня 2018

, чтобы узнать, какой столбец был выбран / выбран,
слушайте 'select' событие 

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

затем используйте метод диаграммы getSelection(), чтобы получить индекс строки и столбца выбранного столбца
getSelection вернет массив объектов 

[{row: 0, column: 1}]

событие выбора будет срабатывать как при выбранном, так и при невыбранном столбце
обязательно проверьте длину возвращаемого массива по 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>
...