Google Chart堆叠栏在OnClick时获取钥匙名

Question

    google.charts.load('current', { packages: ['corechart', 'bar'] });
    google.charts.setOnLoadCallback(drawChart);
    function drawChart() {
		var data = google.visualization.arrayToDataTable([
			['DATA', 'L', 'P'],
			['PCX',  18, 21],['PCG',  131, 34],['PCO',  9, 3],['PGD',  441, 269],['PAH',  1, 1],['POD',  8, 5],['PCT',  80, 180],['PDD',  1, 7],['PZZ',  3, 8],['PKK',  461, 580],['PBI',  494, 248],['PKI',  2, 5],['PKL',  5, 1]		]);
		var options = {
			isStacked: 'percent',
			legend: { position: 'top' },
			chartArea: {
				left: 40,
				width: '100%',
				height: '75%'
			},
			vAxis: {
				minValue: 0,
			},
			hAxis: {
				textStyle: { fontSize: 7 }
			}
		};
		var chart = new google.visualization.ColumnChart(document.getElementById('DataChart'));
		chart.draw(data, options);
		
			
		google.visualization.events.addListener(chart, 'select', selectHandler);
		function selectHandler(e) {	
			var selection = chart.getSelection();
			  if (selection.length > 0) {
				var mydata = data.getValue(selection[0].row,0);
        alert(mydata);
        //i want get key data L when klik stacked data L or P when klik stacked data P, because i want to send data
        
				chart.setSelection([]);
			  }
		}
    }
    
    
      $(window).resize(function () {
      drawChart();
    });

svg > g > g:last-child { pointer-events: none }

<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="DataChart" ></div>

您好，我有一个来自Google Chart插件的创建堆叠栏，当我单击slice bar(红色或蓝色(时，我想获取数据时，当我单击红色时，我会在红色时获得数据" p"，如果我单击蓝色获取数据"l" JS小提琴中的此演示

我已经获得了数据名称数据，例如PCX，PCG，PGD等，但是如果单击蓝色并在单击红色时获得数据" L"，请获取数据" L"。帮助我谢谢

Answer 1

要获取列标签，使用数据表方法 -> getColumnLabel(colIndex)
从选择中传递column属性...

function selectHandler(e) {
  var selection = chart.getSelection();
  if (selection.length > 0) {
    // get column label
    var colLabel = data.getColumnLabel(selection[0].column);
    var mydata = data.getValue(selection[0].row,0);
    console.log(colLabel + ': ' + mydata);
    chart.setSelection([]);
  }
}

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

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  $(window).resize(drawChart);
  drawChart();
});
function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['DATA', 'L', 'P'],
    ['PCX',  18, 21],['PCG',  131, 34],['PCO',  9, 3],['PGD',  441, 269],['PAH',  1, 1],['POD',  8, 5],['PCT',  80, 180],['PDD',  1, 7],['PZZ',  3, 8],['PKK',  461, 580],['PBI',  494, 248],['PKI',  2, 5],['PKL',  5, 1]    ]);
  var options = {
    isStacked: 'percent',
    legend: { position: 'top' },
    chartArea: {
      left: 40,
      width: '100%',
      height: '75%'
    },
    vAxis: {
      minValue: 0,
    },
    hAxis: {
      textStyle: { fontSize: 7 }
    }
  };
  var chart = new google.visualization.ColumnChart(document.getElementById('DataChart'));
  chart.draw(data, options);
  google.visualization.events.addListener(chart, 'select', selectHandler);
  function selectHandler(e) {
    var selection = chart.getSelection();
    if (selection.length > 0) {
      var colLabel = data.getColumnLabel(selection[0].column);
      var mydata = data.getValue(selection[0].row,0);
      console.log(colLabel + ': ' + mydata);
      chart.setSelection([]);
    }
  }
}

<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="DataChart"></div>

Answer 2

在Google图表文档中，

"如果指定了行和列，则选定的元素是一个单元格。如果仅指定行，则选择的元素为行。如果仅指定列，则选择的元素是列。"(https://developers.google.com/chart/interactive/docs/events(

在您的演示中，单击bluebar(l(时，选择[0]。

因此，您可以在selecthandler中获得p/l

var data = ['DATA', 'L', 'P']
function selectHandler(e) { 
    var selection = chart.getSelection();
    if (selection.length > 0) {
        var temp = selection[0].column
        console.log(data[temp]) // temp = 1 will be 'L'; temp = 2 will be 'P'
    }
}