谷歌图表触发工具提示

Question

我在我的网站上创建了两个甜甜圈谷歌图表，然后我关闭了传奇。我还设置了工具提示的html样式，当我点击甜甜圈时，我可以触发工具提示。问题是，我想从我用html写的传说中触发甜甜圈的特定部分，这可能吗？我的代码类似于：

function drawChart() {                                            
var data = new google.visualization.DataTable();              
data.addColumn("string", "");                                 
data.addColumn("number", "");                                 
data.addRows([                                                
["A", 1],                                                 
["B", 1],                                                 
["C", 2],                                                 
["D", 3],                                                 
["E", 4],                                                 
["F", 5],                                                 
["G", 6],                                                 
["H", 2],                                                 
["I", 1]                                                  
]);                                                           

var chart = new google.visualization.PieChart("my_chart");    

chart.draw(data, chart_options);                              
}                                                                 

var chart_options = {height: 300,                                 
pieHole: 0.5,                                
chartArea: {"width": "90%", "height": "90%"},
tooltip: {                                   
isHtml: true,                            
trigger: "selection"                     
},                                           
legend: {                                    
position: "none"                         
}};                                          

google.charts.load("current", {"packages":["corechart"]});        
google.charts.setOnLoadCallback(function() {drawChart() });       

我的html代码类似于：

<table id="summary">  
<tr>                                                                                             
<td>A:</td>                                                                    
<td>1</td>       
</tr>                                                                                            
<tr>                                                                                             
<td>B:</td>                                                                    
<td>1</td>       
</tr>        
<tr>                                                                                             
<td>C:</td>                                                                    
<td>2</td>       
</tr>                                                                                    
</table>                                                                                             

如何在"；A"；当点击(悬停(包含"；A"；进入

Answer 1

使用表上的单击事件来确定单击了哪一行
然后使用图表的setSelection方法选择图表。

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

google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = new google.visualization.DataTable();
data.addColumn("string", "");
data.addColumn("number", "");
data.addRows([
["A", 1],
["B", 1],
["C", 2],
["D", 3],
["E", 4],
["F", 5],
["G", 6],
["H", 2],
["I", 1]
]);
var chart_options = {
height: 300,
pieHole: 0.5,
chartArea: {"width": "90%", "height": "90%"},
tooltip: {
isHtml: true,
trigger: "selection"
},
legend: {
position: "none"
}
};
var chart = new google.visualization.PieChart(document.getElementById("my_chart"));
google.visualization.events.addListener(chart, 'ready', function () {
// add click event to table
var table = document.getElementById('summary');
table.addEventListener('click', function (sender) {
// find row clicked
var rowIndex = null;
switch (sender.target.tagName) {
case 'TD':
rowIndex = sender.target.parentNode.rowIndex;
break;

case 'TR':
rowIndex = sender.target.rowIndex;
break;
}
if (rowIndex !== null) {
// set chart selection
chart.setSelection([{row: rowIndex}]);
}
});
});
chart.draw(data, chart_options);
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="my_chart"></div>
<table id="summary">
<tr>
<td>A:</td>
<td>1</td>
</tr>
<tr>
<td>B:</td>
<td>1</td>
</tr>
<tr>
<td>C:</td>
<td>2</td>
</tr>
</table>