开发者社区> 问答> 正文

怎么把页面中List的值传到jQuery里,

<!doctype html>
<html>
    <head>
        <script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
        <script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
        <script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/exporting.js"></script>
        <script type="text/javascript">
            $(function (){
                $('#container').highcharts({
                    title: {
                        text: '?',
                    },
                    xAxis: {
                        categories: []
                    },
                    yAxis: {

                        title: {
                            text: '数据'
                        },
                    },
                    series: [{
                        name: '?',
                        data: []
                    }]
                });
            });
        </script>
        <script type="text/javascript">
            $(function () {
                $('#container2').highcharts({
                    title: {
                        text: '链球菌毒素O',
                    },
                    xAxis: {
                        categories: []
                    },
                    yAxis: {

                        title: {
                            text: '数据'
                        },
                    },
                    series: [{
                        name: 'SBASO',
                        data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
                    }]
                });
            });
        </script>
    </head>
    <body>
        <h1>曲线图</h1>
        <!-- 第一个空图 -->
        <div id="container" style="width:300px;height:300px;float:left;"></div>
        <!-- 第二个有数据的图 -->
        <div id="container2" style="width:300px;height:300px;float:left;"></div>
        <table border="1" align="left">
            <tr>
                <td>CName</td>
                <td>EName</td>
                <td>Time</td>
                <td>Date</td>               
            </tr>
            <tr>
                <td>血小板</td>
                <td>HPLT</td>
                <td>1</td>
                <td>7.0</td>                
            </tr>
            <tr>
                <td>血小板</td>
                <td>HPLT</td>
                <td>2</td>
                <td>6.9</td>                
            </tr>
            <tr>
                <td>血小板</td>
                <td>HPLT</td>
                <td>3</td>
                <td>9.5</td>                
            </tr>
        </table>
    </body>

展开
收起
小旋风柴进 2016-06-07 10:48:06 2002 0
1 条回答
写回答
取消 提交回答
  • 自己遍历表格获取需要的数据赋值给highchart

     <!doctype html>
    <html>
    <head>
        <script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
        <script src="http://code.highcharts.com/highcharts.js"></script>
        <script src="http://code.highcharts.com/modules/exporting.js"></script>
        <script type="text/javascript">
            $(function () {
                var tb = $('#tb'), title = tb.find('tr:eq(1) td').html();
                var series = [{ name: tb.find('tr:eq(0) td:eq(2)').html(), data: [] }, { name: tb.find('tr:eq(0) td:eq(3)').html(), data: [] }];
                tb.find('tr:gt(0)').each(function () {
                    series[0].data.push(this.cells[2].innerHTML);
                    series[1].data.push(parseFloat(this.cells[3].innerHTML));
                });
                $('#container').highcharts({
                    title: {
                        text: title,
                    },
                    xAxis: {
                        title: {
                            text: series[0].name
                        },
                        categories: series[0].data
                    },
                    yAxis: {
                        title: {
                            text: '数据'
                        },
                    },
                    series: [series[1]]
                });
            });
        </script>
        <script type="text/javascript">
            $(function () {
                $('#container2').highcharts({
                    title: {
                        text: '链球菌毒素O',
                    },
                    xAxis: {
                        categories: []
                    },
                    yAxis: {
    
                        title: {
                            text: '数据'
                        },
                    },
                    series: [{
                        name: 'SBASO',
                        data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
                    }]
                });
            });
        </script>
    </head>
    <body>
        <h1>曲线图</h1>
        <!-- 第一个空图 -->
        <div id="container" style="width:300px;height:300px;float:left;"></div>
        <!-- 第二个有数据的图 -->
        <div id="container2" style="width:300px;height:300px;float:left;"></div>
        <table border="1" align="left" id="tb">
            <tr>
                <td>CName</td>
                <td>EName</td>
                <td>Time</td>
                <td>Date</td>
            </tr>
            <tr>
                <td>血小板</td>
                <td>HPLT</td>
                <td>1</td>
                <td>7.0</td>
            </tr>
            <tr>
                <td>血小板</td>
                <td>HPLT</td>
                <td>2</td>
                <td>6.9</td>
            </tr>
            <tr>
                <td>血小板</td>
                <td>HPLT</td>
                <td>3</td>
                <td>9.5</td>
            </tr>
        </table>
    </body>
    2019-07-17 19:29:33
    赞同 展开评论 打赏
问答分类:
问答地址:
问答排行榜
最热
最新

相关课程

更多

相关电子书

更多
Javascript中的对象 立即下载
穆客带你快速定位 Node.js 内存泄露 立即下载
穆客带你快速定位Node.js内存泄露 立即下载