动态更新highcharts数据

最新推荐文章于 2025-06-03 09:06:43 发布

danielinbiti

最新推荐文章于 2025-06-03 09:06:43 发布

阅读量6.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： JS 文章标签： highcharts 动态更新数据 series

本文链接：https://blog.youkuaiyun.com/danielinbiti/article/details/47188497

JS 专栏收录该内容

27 篇文章

订阅专栏

这篇博客展示了如何利用JavaScript和Highcharts库动态更新曲线图的数据。通过示例代码，作者演示了从HTML表格中获取数据并将其应用到Highcharts图表上，包括清空原有数据、设置新数据和更新图表标题的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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">
        	   var chart ;
            $(function (){
                chart = new Highcharts.Chart({
                	chart: {  
                        renderTo: 'container'
                    },
                    title: {
                        text: '?',
                    },
                    xAxis: {
                        categories: []
                    },
                    yAxis: {
                        title: {
                            text: '数据'
                        },
                    },
                    series: []
                });
            });
            function show(){
            	var trs = $('table tr');
            	var datas=[];
            	var map={};
            	for(var i=1;i<trs.length;i++){
            		 var nams = $('td:first',trs[i]).html();
            		 var value = $('td:last',trs[i]).html();
            		 if(typeof map[nams]=='undefined'){
            		 	  var pos = datas.length;
            		 	  map[nams] = pos;
            		 	  datas[pos]={name:nams,data:[]};
            		 }
            		 datas[map[nams]]["data"].push(Number(value));
            	}
            	var series=chart.series;  
            	if(series.length > 0){
            	   series[0].remove(false); 
              }
              var d = datas[0];
              chart.addSeries(d);//设置数据,danielinbiti
              chart.setTitle({text:d.name});//设置标题 commend by danielinbiti
              chart.redraw();
            }
        </script>
        <script type="text/javascript">
            $(function () {
                new Highcharts.Chart({
                	  chart: {  
                        renderTo: 'container2'
                    },
                    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>
    	  <input type='button' onclick='show()' value='显示表格数据'/>
        <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>
</html>