Question

我需要打开一个弹出窗口并通过单击主窗口中的按钮显示高图图表。我发现了很多关于如何在当前页面的现有图表中弹出一个更大的图形的讨论和示例，但这不符合我的需求。有人可以勾勒出这样做的方法吗？

的问候，奥利弗

Answer 1

我已经举例说明了如何在新标签页中打开图表：

您可以使用window.open（）方法在单击按钮后在选项卡中打开新页面： http://www.w3schools.com/jsref/met_win_open.asp

在您的窗口中，您可以使用appendChild（）和html（）方法添加容器和脚本： http://api.jquery.com/html/ http://www.w3schools.com/jsref/met_node_appendchild.asp

function(chart) {
    $('#newTab').click(function() {
      var options = chart.userOptions,
        container = chart.renderTo,
        w,
        html = '<div id="' + container.id + '" style="min-width: 310px; height: 400px; margin: 0 auto"></div>',
        s1 = document.createElement('script'),
        s2 = document.createElement('script'),
        s3 = document.createElement('script'),
        s4 = document.createElement('script');
      t = document.createTextNode('$(function() {$("#' + container.id + '").highcharts(' + JSON.stringify(options) + ')})');
      s3.setAttribute('type', 'text/javascript');
      s3.appendChild(t);
      s4.setAttribute('src', 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js');
      s1.setAttribute('src', 'https://code.highcharts.com/highcharts.js');
      s2.setAttribute('src', 'https://code.highcharts.com/modules/exporting.js');
      w = window.open("", '_blank', "height=200,width=400,status=yes,toolbar=no,menubar=no,location=no");
      w.document.getElementsByTagName('head')[0].appendChild(s4);
      setTimeout(function() {
        w.document.getElementsByTagName('head')[0].appendChild(s1);
        setTimeout(function() {
          w.document.getElementsByTagName('head')[0].appendChild(s2);
          $(w.document.body).html(html);
          w.document.getElementsByTagName('head')[0].appendChild(s3);
        }, 100)
      }, 100)

    });
  }

在这里你可以看到一个如何工作的例子： http://jsfiddle.net/gtyLtd71/6/

Answer 2

您可以通过双击http://jsfiddle.net/asadsarwar89/27k5bj5k/等图表在模态窗口中显示图表与一些CSS和JS：

$('.chart-container').bind('dblclick', function () {
    $(this).toggleClass('modal');
    $('.chart', this).highcharts().reflow();
});

此事件也可以绑定到按钮点击事件。

如何在弹出窗口中打开highcharts图？

2 个答案: