Google ChartのPieChartの特定の部分（データバー）にイベントリスナーを追加するには？

Question

私の英語はOKではない場合は申し訳ありません。

PieChartの特定の部分（ピース）にイベントリスナーを追加するにはどうすればいいですか？

たとえば、誰かが「Mushooms」の上を移動し、キノコに関する別の図が表示されます。

here is a picture

どのように私は、変数chartからこのmusroomsピース "を抽出" することができますか？

var chart = new google.visualization.PieChart(document.getElementById('chart_div')); 

私はホバーリングのツールチップは必要ありません。私が必要とするのは、ホバリング時にモーダルボックスwhith別のグラフを開くことです。それは可能ですか？私は、ツールチップを表示するのではなく、ホバー上で何か他のことが起こる可能性があることを意味しますか？

私はインターネットを検索しましたが、見つけたのはツールチップをカスタマイズする方法でした。

ありがとうございます。私は答えに専念する時間をappretiate。ここ

Answer 1

コメントで述べたonmouseoverイベントを使用した例です...

は「ペパロニ」（青スライス）

google.charts.load('current', { 
 
    callback: function() { 
 
    drawChart(); 
 
    window.addEventListener('resize', drawChart, false); 
 
    }, 
 
    packages:['corechart'] 
 
}); 
 

 
function drawChart() { 
 
    var data = new google.visualization.DataTable(); 
 
    data.addColumn('string', 'Pizza'); 
 
    data.addColumn('number', 'Populartiy'); 
 
    data.addRows([ 
 
    ['Pepperoni', 33], 
 
    ['Hawaiian', 26], 
 
    ['Mushroom', 22], 
 
    ['Sausage', 10], 
 
    ['Anchovies', 9] 
 
    ]); 
 

 
    var dataPepperoni = new google.visualization.DataTable(); 
 
    dataPepperoni.addColumn('string', 'Pepperoni'); 
 
    dataPepperoni.addColumn('number', 'Type'); 
 
    dataPepperoni.addRows([ 
 
    ['Spicy', 2], 
 
    ['Mild', 3], 
 
    ['Hot', 4] 
 
    ]); 
 

 
    var options = { 
 
    height: 400 
 
    }; 
 

 
    var tooltip = document.getElementById('chart_div_tooltip'); 
 
    var chart = new google.visualization.PieChart(document.getElementById('chart_div')); 
 
    google.visualization.events.addListener(chart, 'onmouseover', function (gglEvent) { 
 
    if (gglEvent.row === 0) { 
 
     tooltip.className = 'tooltip'; 
 
     new google.visualization.PieChart(tooltip).draw(dataPepperoni); 
 
    } 
 
    }); 
 
    google.visualization.events.addListener(chart, 'onmouseout', function (gglEvent) { 
 
    tooltip.className = 'hidden'; 
 
    tooltip.innerHTML = ''; 
 
    }); 
 
    chart.draw(data, options); 
 
}

.tooltip { 
 
    border: 1px solid #e0e0e0; 
 
    height: 320px; 
 
    padding: 12px 12px 12px 12px; 
 
    width: 320px; 
 
} 
 

 
.hidden { 
 
    display: none; 
 
    visibility: collapse; 
 
}

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart_div"></div> 
 
<div class="hidden" id="chart_div_tooltip"></div>

上にカーソルを移動、その後、 フルページでモードを次のコードを実行します。