Google Charts получают значение метки столбца - PullRequest
Новая
       7

Google Charts получают значение метки столбца

1 голос
/ 05 марта 2020

Как я могу получить значение для сгруппированных столбцов? В этом случае я хочу, чтобы значение отображалось как в нижней части графика, так и во всплывающей подсказке. Я не совсем уверен, что получить к нему доступ. Я знаю, что это значение находится в первой строке dataTable, когда я его изначально установил. Но как мне получить его в зависимости от того, по какому столбцу щелкнули?

enter image description here

google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawGraph);

var theChart;
var dataTable;

function drawGraph() {
      var jsonData = ([
      	["Something", "Else", "here"],
        [8, 1, 0.25],
        [9, 2, 0.5],
        [10, 3, 1],
        [11, 4, 2.25],
        [12, 5, 2.25],
        [13, 6, 3],
        [14, 7, 3.25],
        [15, 8, 5],
        [16, 9, 6.5],
        [17, 10, 10],
      ]);

      var options = {};
			dataTable = new google.visualization.arrayToDataTable(jsonData);
      theChart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
      google.visualization.events.addListener(theChart, 'select', selectHandler);
      theChart.draw(dataTable, options);
    }

function selectHandler() {
   var selection = theChart.getSelection();
   for (var i = 0; i < selection.length; i++) {
      var item = selection[i];
      console.log(item)

      var selectedData = dataTable.getValue(item.row, item.column);
      console.log(selectedData);
      
      console.log(dataTable.getColumnProperties(item.column));
      console.log(dataTable.getRowProperties(item.row));

      console.log(dataTable.getColumnLabel(item.column));
      console.log(dataTable.toJSON());
      console.log('>>>>');
   }
}
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <div id="chart_div"></div>

1 Ответ

2 голосов
/ 05 марта 2020

у вас есть код для получения значения столбца (7), 

var selectedData = dataTable.getValue(item.row, item.column);

другое необходимое вам значение - это значение оси x (14).
this можно найти в первом столбце таблицы данных.
просто используйте 0 в качестве индекса столбца. 

var selectedLabel = dataTable.getValue(item.row, 0);

см. Следующий рабочий фрагмент ... 

google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawGraph);

var theChart;
var dataTable;

function drawGraph() {
  var jsonData = ([
    ["Something", "Else", "here"],
    [8, 1, 0.25],
    [9, 2, 0.5],
    [10, 3, 1],
    [11, 4, 2.25],
    [12, 5, 2.25],
    [13, 6, 3],
    [14, 7, 3.25],
    [15, 8, 5],
    [16, 9, 6.5],
    [17, 10, 10],
  ]);

  var options = {};
  dataTable = new google.visualization.arrayToDataTable(jsonData);
  theChart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
  google.visualization.events.addListener(theChart, 'select', selectHandler);
  theChart.draw(dataTable, options);
}

function selectHandler() {
  var selection = theChart.getSelection();
  for (var i = 0; i < selection.length; i++) {
    var item = selection[i];
    console.log(item)

    var selectedData = dataTable.getValue(item.row, item.column);
    var selectedLabel = dataTable.getValue(item.row, 0);
    console.log(selectedLabel, selectedData);
  }
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
...