javascript - 谷歌图表获取列标签值

Question

如何检索分组列的值？在这种情况下，我想要在图表底部和工具提示中都看到的值。我不太确定可以访问它。当我最初设置它时，我知道这个值在 dataTable 的第一行。但是如何根据单击的列检索它？

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>
      

标签： javascriptchartsgoogle-visualization

Answer 1

您有获取列 ( 7) 值的代码，

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

您需要的另一个值是 x 轴值 ( 14)。
这可以在数据表的第一列中找到。
仅用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>