在弹出窗口中的选项卡中加载动态内容

Question

我有一个按钮，点击该按钮会打开标签。这些选项卡包含divs container1，容器2等。我想在这些div上加载图表。我已经将这些图表作为单独的页面进行了尝试，因为我使用$（document）.on（＆＃39; pageshow＆＃39;，＆＃39; #index＆＃39;，function（）{}）;但是现在当我尝试在标签中使用它时，如何调用相应的div函数???

我的代码在这里

<div data-role="page">
  <div data-role="header">
  <h1>Slide 5</h1>
  </div>

  <div id="divmain" data-role="main" class="ui-content" style="height:40%">

   <a href="#popupBasic" data-rel="popup" class="ui-btn ui-corner-all ui-shadow                 ui-btn-inline" data-transition="pop">Basic Popup</a>
<div data-role="popup" id="popupBasic">
 <div data-role="tabs" id="tabs">
  <div data-role="navbar">
    <ul>
      <li><a id="firstTab" href="#one" value="verify">one</a></li>
      <li><a href="#two" data-ajax="false">two</a></li>
      <li><a href="#three" data-ajax="false">three</a></li>
      <li><a href="#four" data-ajax="false">four</a></li>
    </ul>
  </div>
  <div id="one" class="ui-body-d ui-content">
        <div id="container1" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

    <h1 id="tab1">First tab contents</h1>
  </div>

  <div id="two">
    <div id="container2" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

    <h1 id="tab1">Second tab contents</h1>
  </div>

  <div id="three" class="ui-body-d ui-content">
       <div id="container3" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
    <h1>Third tab contents</h1>
  </div>

  <div id="four" class="ui-body-d ui-content">
    <div id="container4" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
    <h1>Fourth tab contents</h1>
  </div>
</div>
</div>

  </div>
</div>


</body>

一个特定图表的代码在这里

$(document).on('pageshow', '#index', function () {
    // Set up the chart
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'column',
            margin: 75,
            options3d: {
                enabled: true,
                alpha: 15,
                beta: 15,
                depth: 50,
                viewDistance: 25
            }
        },
        title: {
            text: 'Chart demo'
        },
        subtitle: {
            text: 'Data for Sales'
        },
        plotOptions: {
            column: {
                depth: 25
            }
        },
        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }]
    });


    // Activate the sliders
    $('#R0').on('change', function(){
        chart.options.chart.options3d.alpha = this.value;
        showValues();
        chart.redraw(false);
    });
    $('#R1').on('change', function(){
        chart.options.chart.options3d.beta = this.value;
        showValues();
        chart.redraw(false);
    });

    function showValues() {
        $('#R0-value').html(chart.options.chart.options3d.alpha);
        $('#R1-value').html(chart.options.chart.options3d.beta);
    }
    showValues();
});

那么如何为每个标签调用特定功能???

Answer 1

您可以将Highcharts创建代码放在函数中并传入容器ID（也可以传递数据，标题等的其他参数）。

function MakeChart(containerid){
     // Set up the chart
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: containerid,
            type: 'column',
            margin: 75,
            options3d: {
                enabled: true,
                alpha: 15,
                beta: 15,
                depth: 50,
                viewDistance: 25
            }
        },
        title: {
            text: 'Chart demo'
        },
        subtitle: {
            text: 'Data for Sales'
        },
        plotOptions: {
            column: {
                depth: 25
            }
        },
        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }]
    });   
}

然后在页面显示或每个选项卡显示时，使用适当的容器ID调用该函数：

$(document).on('pageshow', '#index', function () {
   MakeChart("container1");
   MakeChart("container2");
   MakeChart("container3");
   MakeChart("container4");
});

在这个例子中，我在页面显示中渲染所有4个图表。

  

这是一个有效的 DEMO