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的示例中的'