jqplot线性图表未显示在相应的选项卡中

时间:2014-05-29 12:58:24

标签: javascript jquery jquery-mobile jqplot

我有一个代码在一个html页面中有两个选项卡。我必须在一个选项卡上绘制一个表格,在另一个选项卡上绘制图表。图表显示在两个选项卡中。请阅读代码下方的几行< / p>

</head>
<body>

   <div data-role="tabs">
      <div data-role="navbar">
      <ul>
      <li><a href="#one" data-theme="a" data-ajax="false">table</a></li>
      <li><a href="#two" data-theme="a" data-ajax="false">Chart</a></li>

    </ul>
</div>


    <div id="one" class="ui-content">

    <style>
         table,th,td
           {
             border:1px solid black;

           }
           th
             {
              background-color:green;
              color:white;
             }
       </style>



       <table id="myTable">


       </table>


       <script>
       var json = //some json data;

       var data = $.parseJSON(json);
       var prices = [];

        for (var i=0, len=data.length; i < len; i++) {
        var table = document.getElementById("myTable");
        var row = table.insertRow(i);
        var cell1 = row.insertCell(0);
        var cell2 = row.insertCell(1);
        var cell3 = row.insertCell(2);
       cell1.innerHTML = data[i].date;
        var val = new String(data[i].date);
       var curr_date = val.substr(0,2);
       var curr_month = val.substr(3,2);
       var curr_year = val.substr(6,4);
       var s = "-";

       curr_year = curr_year.concat(s,curr_month,s,curr_date);
       curr_date = "'"+curr_date+"'";

       cell2.innerHTML = data[i].minPrice;
       cell3.innerHTML = data[i].maxPrice;
       var test = [];
       test.push(curr_year,parseInt(data[i].maxPrice));
       prices.push(test);

               }

       </script>



    </div>

    <div id="two" >

   </div>


      <script>
     $(document).ready(function(){


          var plot1 = $.jqplot('chartdiv', [prices], {
          title:'Price Chart Details',
          axes:{xaxis:{renderer:$.jqplot.DateAxisRenderer,label:'Date'},yaxis:
                                              {label:'Price'}},

           series:[{lineWidth:4, markerOptions:{style:'square'}}]

                                                      });
                                  });
      console.log("Chart Drawn");
     </script>

  </body>
  </html>

我知道chartdiv没有与标签相关联。如果我给图表容器一个id&#34;两个&#34;它根本没有显示图表,所以我在一个尚未在页面中声明的容器中显示图表。 如果有人可以指出错误并纠正错误,那就太棒了

0 个答案:

没有答案