Question

我正在尝试加载一个使用Jquery getJSON（）函数读取json文件的html页面。

sample.html

    <html>
<head>
    <script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
    <script src="http://code.highcharts.com/stock/highstock.js"></script>
        <script src="http://code.highcharts.com/modules/heatmap.js"></script>
    <script>

   $(document).ready(function() {

    var options = {
        chart: {
            renderTo: 'container',
            type: 'heatmap',
            zoomType:'x',
            plotWidth:400,
            plotHeight:400
        },
          title: {
            text: ''
        },

        xAxis: {
            categories: ['AA11230', 'AA11231', 'AA11232', 'AA11233', 'AA11234', 'AA11235']
        },

        yAxis: {
            categories: ['AA11230', 'AA11231', 'AA11232', 'AA11233', 'AA11234', 'AA11235'],
            title: null
        },

        colorAxis: {
            min: 0,
            minColor: '#FFFFFF',
            maxColor: Highcharts.getOptions().colors[0]
        },

        legend: {
            align: 'right',
            layout: 'vertical',
            margin: 0,
            verticalAlign: 'top',
            y: 25,
            symbolHeight: 280
        },
        plotOptions:{
                   series:{
                          turboThreshold: 0
                          }
        },
        series: [{}]
    };

    $.getJSON('sample2.json', function(data) {
        options.series[0].data = data;
        var chart = new Highcharts.Chart(options);
    });

});

    </script>
</head>
<body>
<div id="container" style="min-width: 400px; height: 600px; margin: 0 auto"></div>
</body>
</html>

sample2.json

[[1, 2, 1],
[2, 3, 1],
[3, 4, 0.9],
[4, 5, 0.7],
[5, 6, 0.9],
[1, 3, 0.1],
[2, 4, 0.3],
[3, 5, 0.4],
[4, 6, 0.8],
[1, 4, 1],
[2, 5, 0.9],
[3, 6, 0.8],
[1, 5, 0.9],
[2, 6, 0.6],
[1, 6, 0.1]
]

的index.html

     <html> 
      <script> 
         $(function(){ $("#plots-tabs-C").load("sample.html");   });       </script> 
    <body> 
      <div id="plots-tabs" class="plots-tabs" style="padding-top: 10px; padding-bottom: 10px"> 


      <ul id="plots-tabs-header" class="plots-tabs-header"> 
          <li class="plots-tabs-tab"><a href="#plots-tabs-A">PLOT A</a></li> 
          <li class="plots-tabs-tab"><a href="#plots-tabs-B">PLOT B</a></li> 
          <li class="plots-tabs-tab"><a href="#plots-tabs-C">PLOT C</a></li> 
      </ul>  

      <div id="plots-tabs-body" class="plots-tabs-body"> <div id="plots-tabs-A"  class="plots-tabs-body-content" style="margin: 0px; padding: 0px;">    </div>      
      <div id="plots-tabs-B" class="plots-tabs-body-content"></div> 
      <div id="plots-tabs-C" class="plots-tabs-body-content"></div> 
     </div> 
    </div>
  </body> 
  </html>

但是在点击PLOT C时它不会自动加载数据（sample2.json）。我该如何解决这个问题？

Answer 1

您可以尝试在点击事件中包装加载调用：

$("#plots-tabs-C").click( function(){ $("#plots-tabs-C").load("sample.html");   } );

此外，您似乎还有额外费用 div关闭标记在你的index.html。

如何加载动态内容的html页面？

1 个答案: