Question

＆＃13;

    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();
    });

＆＃13;

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

＆＃13;

<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>

＆＃13;

您好，我有一个来自谷歌图表插件的创建堆叠栏，我想在我点击红色时点击切片栏（红色或蓝色）获取数据我得到数据＆＃34; P＆＃34;如果我点击蓝色获取数据＆＃34; L＆＃34;这个演示在Js Fiddle

中

我已经获得了PCX，PCG，PGD等数据名称数据，但我想得到数据＆＃34; L＆＃34;如果点击蓝色并获取数据＆＃34; P＆＃34;点击红色时。帮助我，谢谢

Answer 1

获取列标签，使用数据表方法 - ＆gt; 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([]);
  }
}

请参阅以下工作代码段...

＆＃13;

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([]);
    }
  }
}

＆＃13;

<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>

＆＃13;

Answer 2

在谷歌图表文档中，

“如果同时指定了行和列，则所选元素是一个单元格。如果只指定了行，则所选元素是一行。如果只指定了列，则所选元素就是一列。” （https://developers.google.com/chart/interactive/docs/events）

在你的演示中，当点击blueBar（L）时，选择[0] .column将为1而另一个（redBar（P））将为2.

因此您可以在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'
    }
}

Google图表堆叠栏在onclick时获取密钥名称

2 个答案: