Google Charts：手动将焦点放在柱形图中的数据列上

Question

我正在制作Google Charts ColumnChart的自定义图例。我希望它具有与本机图例相同的行为。本机图例在单击和鼠标悬停时具有行为。单击图例键时，将选择值列。我可以通过调用

在我的自定义图例中执行此操作

myChartWrapper.getChart().setSelection([{column: 4}]);

当一个图例键被鼠标悬停时，值列会得到一个轮廓。我想在将鼠标悬停在自定义图例中的键上时触发相同的轮廓。

有没有办法将焦点列设置为类似于设置选择？

我以为我可以通过致电events.trigger()来做到这一点，但我完全无法做到这一点。例如，这些似乎没有做任何事情。

// did nothing:
google.visualization.events.trigger(myChartWrapper, 'select', [{column: 4}]);

// did nothing:
google.visualization.events.trigger(myChartWrapper.getChart(), 'onmouseover', [{column: 4}]);

Answer 1

尝试通过事件触发器

引起焦点外观

＆＃13;

＆＃13;

google.charts.load('current', {
  callback: function () {
    var dataTable = new google.visualization.DataTable({
      cols: [
        {label: 'Month', type: 'string'},
        {label: 'Amount', type: 'number'}
      ],
      rows: [
        {c:[{v: 'April'}, {v: 279899811.34}]},
        {c:[{v: 'May'}, {v: 205855811}]},
        {c:[{v: 'June'}, {v: 10009811}]},
        {c:[{v: 'July'}, {v: 79979811}]},
        {c:[{v: 'August'}, {v: 175789911}]},
        {c:[{v: 'September'}, {v: 99899811}]},
        {c:[{v: 'October'}, {v: 149899811}]},
        {c:[{v: 'November'}, {v: 80899811}]},
        {c:[{v: 'December'}, {v: 60899811}]},
        {c:[{v: 'January'}, {v: 225899811}]},
        {c:[{v: 'February'}, {v: 148899811}]},
        {c:[{v: 'March'}, {v: 150899811}]}
      ]
    });

    var chartWrapper = new google.visualization.ChartWrapper({
      chartType: 'ColumnChart',
      containerId: 'chart_div',
      dataTable: dataTable,
      options: {
        legend: {
          position: 'bottom'
        },
        vAxis: {
          format: 'short'
        }
      }
    });

    google.visualization.events.addOneTimeListener(chartWrapper, 'ready', function () {
      // mouseover for custom div
      document.getElementById('hover_div').addEventListener('mouseover', function () {
        // trigger onmouseover for chart, pass props
        google.visualization.events.trigger(chartWrapper.getChart(), 'onmouseover', {
          'column': 1,
          'row': null,
          'test': 'over'
        });
      }, false);

      // mouseout
      document.getElementById('hover_div').addEventListener('mouseout', function () {
        google.visualization.events.trigger(chartWrapper.getChart(), 'onmouseout', {
          'column': 1,
          'row': null,
          'test': 'out'
        });
      }, false);

      // chart event listeners
      google.visualization.events.addListener(chartWrapper.getChart(), 'onmouseover', function (props) {
        document.getElementById('msg_div').innerHTML = JSON.stringify(props);
      });
      google.visualization.events.addListener(chartWrapper.getChart(), 'onmouseout', function (props) {
        document.getElementById('msg_div').innerHTML = JSON.stringify(props);
      });
    });

    chartWrapper.draw();
  },
  packages:['controls', 'corechart']
});

＆＃13;

#hover_div {
  background-color: magenta;
  border: 1px solid lime;
  color: cyan;
  height: 200px;
  text-align: center;
  width: 200px;
}

＆＃13;

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
<div id="hover_div">HOVER THIS DIV</div>
<div id="msg_div"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

这是一种突出显示条形图中条形图的方法。它不是一个合适的解决方案，因为它没有触发图表的原生亮点。相反，它是一种通过使用jQuery操纵rects的笔划来创建自己的高光的方法。我通过将笔划设置为2px和灰色来近似突出显示。实际的突出显示似乎是svg的模糊效果。为了增强突出显示，我对rects本身应用了一点点透明度。

在鼠标悬停时，我获取所有条形图的集合，然后是特定列的子集。事实证明，在鼠标悬停时获得正确的rects集非常棘手，因为用户可能选择了一个栏。当您使用鼠标选择一个条形（即，单击它）时，它的矩形会四处移动，因此您必须在每次鼠标悬停时重新选择该条形。另外，选择为白色轮廓添加另一个矩形，需要将其过滤掉。

对于自定义图例，我使用了Google图表调色板中的颜色，您可以使用这些颜色here。

我没有添加会在点击图例时触发选择的部分。为此，我将关注this method。

该解决方案也只适用于条形图。您必须使用折线图或其他类型执行其他操作。所以这个解决方案的价值可能有限。

＆＃13;

＆＃13;

	google.charts.load('current', {packages: ['corechart']});
	google.charts.setOnLoadCallback(draw_chart);	

	function draw_chart() {
		// Create DataTable object from DataTable constructor or arrayToDatable()
		var data = new google.visualization.DataTable({"rows":[{"c":[{"v":"Sacramento"},{"v":97},{"v":79},{"v":67},{"v":100}]},{"c":[{"v":"Montpelier"},{"v":96},{"v":74},{"v":32},{"v":96}]},{"c":[{"v":"Juneau"},{"v":24},{"v":44},{"v":54},{"v":64}]},{"c":[{"v":"Montgomery"},{"v":26},{"v":69},{"v":51},{"v":56}]},{"c":[{"v":"Little Rock"},{"v":87},{"v":69},{"v":78},{"v":41}]}],"cols":[{"type":"string","id":"cities","label":"cities"},{"type":"number","id":"A","label":"A"},{"type":"number","id":"B","label":"B"},{"type":"number","id":"C","label":"C"},{"type":"number","id":"D","label":"D"}]});
        
		// Add formatters, if any

		// Create ChartWrapper
		var my_chart = new google.visualization.ChartWrapper({      
			"containerId": "chart_id",
			"dataTable": data,
			"chartType": "ColumnChart",
			"options": {"bar": {"groupWidth": 67}, "chartArea": {"width": 440, "top": 20, "height": 295, "left": 60}, "height": 375, "width": 500, "fontSize": 12, "legend": "none"}
		});
    
		var bar_rect_set;
		var num_rows = 5;
		var num_cols = 4;
		var num_series = num_rows * num_cols;
		var parent_g;
			
		function get_bar_rect_set() {
			// get all the rects in the parent except for the white outline rects
			// on selected bars, if any.
			bar_rect_set = parent_g.find('rect[fill!="#ffffff"]');				
		}
		google.visualization.events.addOneTimeListener(my_chart, 'ready', function () {
			// Get an initial collection of the bar rects, along with their parent.
			// Hereafter, get the bar rects with the method above.
							
			// get all rects three layers down, including gridlines and axis
			var g_set_1 = $("svg g g g rect");
			// slice out the gridlines at the beginning and the axis line at the end
			bar_rect_set = g_set_1.slice(g_set_1.length - num_series - 1, g_set_1.length - 1);
			parent_g = $(bar_rect_set[0]).parent();
		});
			
		my_chart.draw();

		function highlight_bars(series_num) {
			if (series_num > num_cols - 1) {
				return false;
			}
			get_bar_rect_set();
			var start_index = series_num * num_rows;
			var end_index = start_index + num_rows;

			var series_g_set = bar_rect_set.slice(start_index, end_index)
			var styles = {'stroke-width': "1.5px", "stroke": "#AAAAAA", "opacity": .8};
			series_g_set.css(styles);
		}
			
		function remove_highlight() {
			var styles = {'stroke-width': "0", "opacity": 1};
			bar_rect_set.css(styles);
		}
		 
		$("#legend tr").each(function(index, row) {
			$(row).mouseover(function() {
				highlight_bars(index);
			}).mouseout(function() {
				remove_highlight();
			});
		});
	}

＆＃13;

	.color_bar {
		width:24px;
		height:12px;
		margin-right:5px;
		vertical-align:middle;
	}
	#legend td {
		font-size:12;
		height:19px;
		font-family:"Arial";
	}

＆＃13;

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
	<script src="https://www.gstatic.com/charts/loader.js"></script>
	<table id="legend">
		<tr>
			<td><div class='color_bar' style="background-color:#3366cc"></div></td>
			<td>A</td>
		</tr>
		<tr>
			<td><div class='color_bar' style="background-color:#dc3912"></div></td>
			<td>B</td>
		</tr>
		<tr>
			<td><div class='color_bar' style="background-color:#ff9900"></div></td>
			<td>C</td>
		</tr>
		<tr>
			<td><div class='color_bar' style="background-color:#109618"></div></td>
			<td>D</td>
		</tr>
	</table>
	<div id="chart_id" ></div>

＆＃13;

＆＃13;

＆＃13;