Показать детали в Fancybox с Highcharts

Question

Я пытаюсь показать подробную информацию из Highchart в Fanycbox, когда нажимаю на часть круговой диаграммы.У меня есть следующий скрипт:

$(function() {
  $('#container').highcharts({
    chart: {
      type: 'pie'
    },
    credits: {
      enabled: false
    },
    title: {
      text: ''
    },
    plotOptions: {
      series: {
        cursor: 'pointer',
        dataLabels: {
          enabled: false
        },
        showInLegend: true,
        point: {
          events: {
            click: function(me) {
              $(me).fancybox({
                'autoScale': true,
                'type': 'iframe',
                'transitionIn': 'elastic',
                'transitionOut': 'elastic',
                'speedIn': 500,
                'speedOut': 300,
                'autoDimensions': true,
                'centerOnScroll': true // remove the trailing comma!!
              }).click();

              $('a href=' + this.options.url).one('click', function() {
                myfunction(this);
                return true;
              });
            }
          }
        }
      }
    },
    series: [{
      type: 'pie',
      name: 'Aantal',
      data: [{
          name: 'Not complete',
          y: 10,
          url: 'http://bing.com/search?q=foo',
          color: '##ed1b2e'
        }, {
          name: 'Complete',
          y: 10,
          url: 'http://bing.com/search?q=bar',
          color: '##35ce06'
        }]        
    }]
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<div id="container"></div>

Когда я нажимаю на часть круговой диаграммы, открывается необычная коробка с текстом: «Запрошенный контент не может быть загружен. Повторите попытку позже."

Как использовать переменный URL (например, http://bing.com/search?q=foo) и подключить его к щелчку на круговой диаграмме.

Answer 1

Почему вы пишете $(me).fancybox({..}).click(); - здесь вы прикрепляете и сразу запускаете событие клика, чтобы запустить fancybox.Это так неловко, если вы хотите сразу запустить fancybox, то вам просто нужно использовать метод .open(), для v2 это будет выглядеть так:

$.fancybox.open({
  href: 'https://fancyapps.com/fancybox/3/iframe.html', 
  type : 'iframe'
}); 

Если вы обновитесь до v3, тогда замените href с src.

Имейте в виду, что веб-сайты (такие как bing.com, google.com и другие) могут отказаться от загрузки в iframe.