我有一个代码在一个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;它根本没有显示图表,所以我在一个尚未在页面中声明的容器中显示图表。 如果有人可以指出错误并纠正错误,那就太棒了