我已经创建了表格和图表。现在我想把图表和表格联系起来。在单击表格的一行时,我应该能够突出显示图表中的同一部分。
<!doctype html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js" ></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</head>
<body>
<script type="text/javascript">
$(function () {
$('#container').highcharts({
title: {
text: 'Stock available per week',
x: -20 //center
},
xAxis: {
title:{
text:'week'
},
categories: ['1', '2', '3', '4', '5', '6',
'7', '8', '9', '10','11', '12', '13', '14', '15']
},
yAxis: {
title: {
text: ' quantity'
},
plotLines: [{
value: 0,
width: 0,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '°C'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: 'Apple iphone5',
data: [530, 669, 795, 845, 982, 715, 552, 365, 233, 183, 339, 596]
}, {
name: 'Apple ipod',
data: [402, 308, 517, 113, 170, 320, 248, 241, 601, 841, 586, 925]
},{
name: 'Apple iphone6s',
data: [302, 208, 553, 613, 470, 620, 848, 541, 701, 541, 386, 275]
}, {
name: 'Apple itouch',
data: [332, 408, 557, 613, 880, 1120, 828, 641, 401, 341, 296, 485]
}, {
name: 'Apple iphone6',
data: [829, 506, 385, 284, 135, 170, 386, 479, 643, 790, 839, 1110]
}, {
name: 'apple ipad air',
data: [369, 472, 587, 895, 619, 452, 370, 266, 142, 103, 476, 588]
}]
});
});
</script>
</body>
<title>Determine Click Position on click of a table cell</title>
<!--CSS -->
<style>
td{
cursor:pointer;
background: -moz-linear-gradient(top, #ffffff, #D1E3E9);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffffff), to(#D1E3E9));
text-align:center;
}
td:hover{
background: -moz-linear-gradient(top, #249ee4, #057cc0);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#249ee4), to(#057cc0));
}
td:active
{
background: -moz-linear-gradient(top, #057cc0, #249ee4);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#057cc0), to(#249ee4));
}
#result{
font-weight:bold;
font-size:16pt;
}
</style>
<!--JAVASCRIPT -->
<script>
$(document).ready(function(){
$("#myTable td").click(function() {
var column_num = parseInt( $(this).index() ) + 1;
var row_num = parseInt( $(this).parent().index() )+1;
$("#result").html( "Row_num =" + row_num + " , Rolumn_num ="+ column_num );
});
});
</script>
<div id="result"> </div>
<table id="myTable" border="1" style="border-collapse: collapse;" cellpadding="8">
<!--1st ROW-->
<tr>
<th>devices</th>
<th>week1</th>
<th>week2</th>
<th>week3</th>
<th>week4</th>
<th>week5</th>
</tr>
<tr>
<td>iphone5</td>
<td>45</td>
<td>77</td>
<td>34</td>
<td>29</td>
<td>66</td>
</tr>
<!--2nd ROW-->
<tr>
<td>iphone6</td>
<td>78</td>
<td>77</td>
<td>34</td>
<td>78</td>
<td>93</td>
</tr>
<!--3rd ROW-->
<tr>
<td>iphone6s</td>
<td>33</td>
<td>55</td>
<td>34</td>
<td>67</td>
<td>12</td>
</tr>
<!--4th ROW-->
<tr>
<td>ipod</td>
<td>85</td>
<td>23</td>
<td>34</td>
<td>62</td>
<td>26</td>
</tr>
<!--5th ROW-->
<tr>
<td>ipad air</td>
<td>35</td>
<td>75</td>
<td>34</td>
<td>55</td>
<td>56</td>
</tr>
</table>
</body>
</html>