高图表饼图为每个部分应用模式

Question

在代码中，我创建了 3 个按钮，目的是隐藏它们，它们调用 3 个模态，但我需要一种方法将 highcharts 饼图的每个部分连接到相应的按钮，所以当我单击一个部分时，它会激活按钮并打开模态。

这是我在代码笔网站上的代码：https://codepen.io/MestreALMO/pen/eYmeXRr

//Pie chart
var chart;
chart = new Highcharts.Chart({
chart: {
renderTo: 'chart',
},
credits: {
enabled: false
},
title: {
text: 'Dices'
},
tooltip: {
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.percentage.toFixed(2) +' %';
}
},
plotOptions: {
pie: {
// allowPointSelect: true,
//cursor: 'pointer',

dataLabels: {
enabled: true,
},

point: {
events: {
click: function() {
//location.href = this.options.url;
//window.open(this.options.url);
//alert(this.percentage);
// location.href = this.options.name;
$( this ).click(function() {
alert( "Ha" );
});
}
}
}
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: [
['D20',   45.0],
['D10',       26.8],
{
name: 'D06',    
y: 12.8,
//sliced: true,
//selected: true
}
]
}]
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="chart" style="height:300px;width:450px;"></div>
<div>
<button id="buttonD20" type="button" class="d-none btn btn-primary" data-toggle="modal" data-target="#modalD20">
D20
</button>
<button id='buttonD10' type="button" class="d-none btn btn-primary" data-toggle="modal" data-target="#modalD10">
D10
</button>
<button id='buttonD06' type="button" class="d-none btn btn-primary" data-toggle="modal" data-target="#modalD06">
D06
</button>
</div>
<div id="modalD20" class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<iFrame src="https://rolladie.net/roll-a-d20-die" style="height: 400px;">
</iFrame>
</div>
</div>
</div>
<div id="modalD10" class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<iFrame src="https://rolladie.net/roll-a-d10-die" style="height: 400px;">
</iFrame>
</div>
</div>
</div>
<div id="modalD06" class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<iFrame src="https://rolladie.net/" style="height: 400px;">
</iFrame>
</div>
</div>
</div>

Answer 1

您需要在右侧按钮上触发点击事件：

plotOptions: {
pie: {
...,
point: {
events: {
click: function() {
var btns = document.getElementById('btns').children;
btns[this.index].click()
}
}
}
}
}

---

现场演示：http://jsfiddle.net/BlackLabel/6m4e8x0y/4802/