动态更新highcharts数据的实现方法
动态更新highcharts数据的实现方法
<!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>
以上这篇动态更新highcharts数据的实现方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。
相关推荐
-
Highcharts 多个Y轴动态刷新数据的实现代码
效果图: js代码: $(function() { $(document).ready(function() { Highcharts.setOptions({ global: { useUTC: false } }); var chart; chart = new Highcharts.Chart({ chart: { renderTo: 'container', type: 'spline', animation: Highcharts.svg, // don't animate in ol
-
Highcharts使用简例及异步动态读取数据
Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,并且免费提供给个人学习.个人网站和非商业用途使用.HighCharts支持的图表类型有曲线图.区域图.柱状图.饼状图.散状点图和综合图表. 第一部分:在head之间加载两个JS库. <script src="html/js/jquery.js"></script> <script src="html/js/ch
-
Highcharts＋NodeJS搭建数据可视化平台示例
前一段时间完成了一个数据可视化项目,由后台NodeJS+Highcharts框架进行搭建.下面分享一下整个开发过程的流程,以及使用Highcharts框架的经验. 一.数据的读取 由于数据库使用的是MySQL数据库,在NodeJS中,可以使用NodeJS中的mysql模块进行mysql数据库的相关操作,通过npm安装即可. 1.数据库基本配置 为了方便,我们最好先进行一个数据库连接的基本配置,mysql模块需要的配置信息如下: var connection = mysql.createConne
-
Highcharts学习之数据列
什么是数据列 数据列是一组数据集合,例如一条线,一组柱形等.图表中所有点的数据都来自数据列对象,数据列的基本构造是: series : [{ name : '', data : [] }] 提示:数据列配置是个数组,也就是数据配置可以包含多个数据列. 数据列中的 name 代表数据列的名字,并且会显示在数据提示框(Tooltip)及图例(Legend)中 tags: 1.数据列中的数据填充: 方法一:一维数组 如果有categories属性的话就是使用一维数组 data : [1, 4, 6,
-
通过php动态传数据到highcharts
1:在平时工作中,在对数据进行展示的时候,是直接通过后台提供的接口来获取json串,用来展示.今天别人问怎么在本地演示一下请求的动态数据. 2:在本地搭建环境,我用的WampServer,下载地址:http://xiazai.jb51.net/201703/yuanma/WampServer_2.5_jb51.rar,浏览器打开localhost,文件存放在wamp/www目录下 3:php代码,没有写与数据库实时请求的过程. <?php $b = array( array('name'=>'
-
动态更新highcharts数据的实现方法
动态更新highcharts数据的实现方法 <!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="htt
-
vue+vuex+axios+echarts画一个动态更新的中国地图的方法
本文介绍了vue+vuex+axios+echarts画一个动态更新的中国地图的方法,分享给大家,具体如下: 一. 生成项目及安装插件 # 安装vue-cli npm install vue-cli -g # 初始化项目 vue init webpack china-map # 切到目录下 cd china-map # 安装项目依赖 npm install # 安装 vuex npm install vuex --save # 安装 axios npm install axios --save
-
JS实现点击Radio动态更新table数据
tbody定义一个标签 当上面变化的,在js里面做拼接就行了,拼接结束 tbody.html(XXX) <script type="text/javascript"> $(function(){ var quotas = { 1:{name:"工商银行",oneTime:1000}, 2:{name:"农业银行",oneTime:800}, 3:{name:"中国银行",oneTime:2000}, 4:{name
-
VUE 直接通过JS 修改html对象的值导致没有更新到数据中解决方法分析
本文实例讲述了VUE 直接通过JS 修改html对象的值导致没有更新到数据中解决方法.分享给大家供大家参考,具体如下: 业务场景 我们在使用vue 编写 代码时,我们有一个 多行文本框控件,希望在页面点击一个按钮 在 文本框焦点位置插入一个 {pk}的数据. 发现插入 这个数据后,这个数据并没有同步到 数据中,但是直接通过键盘输入,就可以改变数据. 原因分析 在通过 JS 修改控件的value 数据后,并没有触发到数据更新. 解决办法 Vue.component('rx-textarea', {
-
AJAX和jQuery动态加载数据的实现方法
什么是AJAX? 这里的AJAX不是希腊神话里的英雄,也不是清洁剂品牌,更不是一门语言,而是指异步Javascript和XML(Asynchronous JavaScript And XML),这里的XML(数据格式)也可以是纯文本(Plain Text)或是JSON.简单的说,就是使用XMLHttpRequest对象和服务器端交换数据(以XML或是JSON等格式),使用JavaScript处理数据并更新页面内容. 为什么要使用AJAX? 借助AJAX,我们可以实现: 在不重载页面的情况下,向服
-
iscroll动态加载数据完美解决方法
本文实例为大家分享了iscroll动态加载数据的具体代码,供大家参考,具体内容如下 <div id="wrapper" class="margin-b90"> <div id="scroller"> <div id="pullDown"> <span class="pullDownLabel" style="text-align: center;"
-
Vue 中使用vue2-highcharts实现曲线数据展示的方法
1.要实现的效果如下图: 2.vue前端页面如下: <template> <div> <div> <div> <img src="../assets/index/back.png" class="rank-head-back" @click="routerBack"/> <span >历史曲线</span> </div> </div> &l
-
Android实现listview动态加载数据分页的两种方法
在android开发中,经常需要使用数据分页,比如要实现一个新闻列表的显示,或者博文列表的显示,不可能第一次加载就展示出全部,这就需要使用分页的方法来加载数据,在android中Handler经常用来在耗时的工作中,它接收子线程发送的数据,并使用数据配合更新UI,AsyncTask是在一个线程中执行耗时操作然后把结果传给UI线程,不需要你亲自去管理线程和句柄. 一.使用Handler+线程方法 1.基础知识 Handler在android系统中,主要负责发送和接收消息,它的用途主要有以下两种:
-
Android编程实现动态更新ListView的方法
本文实例讲述了Android编程实现动态更新ListView的方法.分享给大家供大家参考,具体如下: 有时候我们需要修改已经生成的列表,添加或者修改数据,notifyDataSetChanged()可以在修改适配器绑定的数组后,不用重新刷新Activity,通知Activity更新ListView.今天的例子就是通过Handler AsyncTask两种方式来动态更新ListView.从今天起,每次学习的源代码都会打包上传,方便各位同学学习,注册帐号即可下载. 布局main.xml: <?xml
-
Android实现Listview异步加载网络图片并动态更新的方法
本文实例讲述了Android实现Listview异步加载网络图片并动态更新的方法.分享给大家供大家参考,具体如下: 应用实例:解析后台返回的数据,把每条都显示在ListView中,包括活动图片.店名.活动详情.地址.电话和距离等. 在布局文件中ListView的定义: <ListView android:id="@id/maplistview" android:background="@drawable/bg" android:layout_width=&qu