谷歌图表获取列标签值

Question

How can i retrieve the value for the grouped columns? In this case i want the value that is seen both at the bottom of the graph and the tooltip. I'm not quite sure to access it. I know this value is in the first row of the dataTable when i initially set it. But how do i retrieve it based on which column is clicked?

 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>

Answer 1

you have the code to get the value of the column ( 7 ),

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

the other value you need is the x-axis value ( 14 ).
this can be found in the first column of the data table.
just use 0 as the column index.

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

see following working snippet...

 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>