1
我的問題也許有點混亂，所以我會解釋。如何添加鏈接指向一個谷歌餅圖
我用Google Charts來製作一個簡單的餅圖。它效果很好。我需要知道的是能夠鏈接餡餅的所有部分/部分以顯示jquery模式/對話框彈出窗口。
我尋找了很長時間，但仍然找不到任何接近於此的東西。
感謝所有爲閱讀，希望有人能幫助我:)
這裏我的代碼，以顯示我的圖表
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1.0', {'packages':['corechart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Clan');
data.addColumn('number', 'Vampire');
data.addRows([
<? foreach($this->toDisplay as $oClan)
{
echo "['".$oClan->getName()."', ".count($oClan->getMembers()).']';
echo ", ";
} ?>
]);
var options = {'title':'Effectif des clans',
'width':600,
'height':600};
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
<body>
<div id="chart_div"></div>
</body>
這裏與那些我想要監聽的代碼:)
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1.0', {'packages':['corechart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Clan');
data.addColumn('number', 'Vampire');
data.addRows([
<? foreach($this->toDisplay as $oClan)
{
echo "['".$oClan->getName()."', ".count($oClan->getMembers()).']';
echo ", ";
} ?>
]);
var options = {'title':'Effectif des clans',
'width':600,
'height':600};
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
function selectHandler() {
var selectedItem = chart.getSelection()[0];
if (selectedItem) {
var topping = data.getValue(selectedItem.row, 0);
alert('The user selected ' + topping);
}
}
google.visualization.events.addListener(chart, 'select', selectHandler);
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>
該圖表只是一個SVG，因此您可以將一個'click'處理程序綁定到切片元素，假設您的圖表不在Google的示例中的'