highcharts pie 为每个部分应用一个模态

Question

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

这是我在 codepen 网站上的代码：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/

highcharts pie 为每个部分应用一个模态

highcharts pie apply a modal for each section

html

javascript

charts

highcharts

pie-chart