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>

当我单击饼图的一部分时，会打开一个带有以下文字的花式框：“无法加载所请求的内容。请稍后再试。”

如何使用可变网址（即http://bing.com/search?q=foo）并将其连接到饼图上的单击。

Answer 1

为什么要编写$(me).fancybox({..}).click();-在此附加并立即触发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中显示详细信息

1 个答案: