如何链接图表和表格?我的意思是在单击表格的行时，我必须能够突出显示折线图中的线

How to link chart and table ?i mean on clicking the row of a table i must be able to highlight the line in line chart

本文关键字：表格 折线图 显示 单击 链接 何链接 意思是 我的      更新时间：2023-09-26

我已经创建了表格和图表。现在我想把图表和表格联系起来。在单击表格的一行时，我应该能够突出显示图表中的同一部分。

<!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>
相关文章：