highcharts p ie применить модал для каждого раздела - PullRequest
Новая
       23

highcharts p ie применить модал для каждого раздела

0 голосов
/ 03 февраля 2020

В коде я создал 3 кнопки с целью скрыть их, и они вызывают 3 модала, но мне нужен способ соединить каждую секцию старших диаграмм p ie с соответствующей кнопкой, поэтому, когда я нажимаю на раздел, активировать кнопку и открыть модалы.

Вот мой код на сайте 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>

1 Ответ

0 голосов
/ 03 февраля 2020

Вам нужно вызвать событие нажатия правой кнопки: 

plotOptions: {
  pie: {
    ...,

    point: {
      events: {
        click: function() {
          var btns = document.getElementById('btns').children;

          btns[this.index].click()
        }
      }
    }
  }
}

Демонстрационная версия: http://jsfiddle.net/BlackLabel/6m4e8x0y/4802/

...