Google Chart堆积条形图在单击时获得键名

弗拉基米尔大师

    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插件创建堆叠条形图,我想在单击红色时单击切片条(红色或蓝色)时获取数据,如果我单击蓝色时获取数据“ P”,则获取数据“ P”,这Js Fiddle中的演示

我已经获取了数据名称数据,例如PCX,PCG,PGD等,但是如果要单击蓝色,我想获取数据“ L”,而单击红色时要获取数据“ P”。帮帮我谢谢

白帽

要获取列标签,请使用数据表方法->从选择中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>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章