使用 Highcharts 在 Fancybox 中显示详细信息

Question

当我单击饼图的一部分时，我试图在 Fanycbox 中显示 Highchart 的详细信息。我有以下脚本：

$(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>

当我单击饼图的一部分时，会打开一个带有文本的花式框："The requested content cannot be loaded. Please try again later."

如何使用变量 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。

使用 Highcharts 在 Fancybox 中显示详细信息

Show details in Fancybox with Highcharts

jquery

fancybox

highcharts