Javascript 如何链接图表和表格？我的意思是，单击表格的行时，我必须能够突出显示折线图中的线条
我已经创建了表和图表。现在我想将我的图表与表关联起来。 单击表格的行时，我应该能够突出显示图表中的相同部分。Javascript 如何链接图表和表格？我的意思是，单击表格的行时，我必须能够突出显示折线图中的线条,javascript,jquery,Javascript,Jquery,我已经创建了表和图表。现在我想将我的图表与表关联起来。 单击表格的行时，我应该能够突出显示图表中的相同部分。 <!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
<!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>
$（函数（）{
$（“#容器”）。高图({
标题：{
文本：“每周可用库存”，
x:-20/中心
},
xAxis：{
标题：{
正文：“一周”
},
类别：['1'，'2'，'3'，'4'，'5'，'6'，'，
'7', '8', '9', '10','11', '12', '13', '14', '15']
},
亚克斯：{
标题：{
文本：“数量”
},
绘图线：[{
值：0，
宽度：0，
颜色：'#808080'
}]
},
工具提示：{
valueSuffix:“°C”
},
图例：{
布局：“垂直”，
对齐：“右”，
垂直排列：'中间'，
边框宽度：0
},
系列：[{
名称：“苹果iphone5”，
数据：[5306697958459827155265233183339596]
}, {
名称：“苹果ipod”，
数据：[402308517113170320248241601841586925]
},{
名称：“苹果iphone6s”，
数据：[302208553613470620848541701541386275]
}, {
名称：'苹果伊图奇'，
数据：[332、408、557、613、880、1120、828、641、401、341、296、485]
}, {
名称：“苹果iPhone 6”，
数据：[82950638528413517038647908391110]
}, {
名称：“苹果ipad air”，
数据：[369472587895619452370266142103476588]
}]
});
});
单击表格单元格时确定单击位置
运输署{
光标：指针；
背景：-莫兹线性梯度（顶部，#ffffff，#D1E3E9）；
背景：-网络工具包梯度（线性，0%0%，0%100%，从（#ffffff）到（#D1E3E9））；
文本对齐：居中；
}
td:悬停{
背景：-莫兹线性梯度（顶部，249ee4，057cc0）；
背景：-webkit梯度（线性，0%0%，0%100%，从（#249ee4）到（#057cc0））；
}
td：主动
{
背景：-莫兹线性梯度（顶部，#057cc0，#249ee4）；
背景：-webkit梯度（线性，0%0%，0%100%，从（#057cc0）到（#249ee4））；
}
#结果{
字体大小：粗体；
字号：16pt；
}
$（文档）.ready（函数（）{
$（“#myTable td”）。单击（函数（）{
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”）；
});
});
装置
星期一
周2
第3周
第4周
第5周
iphone5
45
77
34
29
66
iphone6
78
77
34
78
93
iphone6s
33
55
34
67
12
ipod
85
23
34
62
26
ipad air
35
75
34
55
56