HighChart学习-更新数据data Series与重绘
一：HighChart介绍
基于JQuery的纯JavaScript的图标库，支持各种图表显示，同时还支持Mootools
与Prototype详细版本支持在这里：
|
JQuery |
1.3.2 - 1.9.x. 2.0.x for modern browsers |
|
Mootools |
1.2.5 - 1.4.5 |
|
Prototype |
1.7 |
支持目前市场几乎所有的主要浏览器IE, Chrome, FF,Safari, Opera等。其图形渲染完
全是是基于SVG与VML方式，其中VML方式主要是兼容IE浏览器，在IE9+及其它浏览
器上渲染技术都是基于SVG方式。下载与安装指导文档
->http://docs.highcharts.com/#home安装好以后，建一个基本static web 项目，如图
所示：
二：HighChart基本的Bar Chart演示
打开链接->http://docs.highcharts.com/#your-first-chart
拷贝your first chart中第二步中的全部script脚本到mydemo.html中的<script></script>
之间。导入JQuery与highchart库文件支持。代码如下：
<scriptsrc="static/jquery-1.9.1/jquery-1.9.1.min.js"></script>
<scriptsrc="static/highcharts-3.0.1/js/highcharts.js"></script>
在tomcat中部署demo1之后访问如下URL：http://localhost:8080/demo1/mydemo.html
在浏览器中看到如下Bar Chart：
三：清除HighChart中的数据集(remove data series from high chart object)
代码修改：
1. 把type：’bar’ 改成type: ’column’ 其作用是让bar垂直显示
2. 向script尾部追加如下代码，自动清除所有series然后刷新
setTimeout(function(){
var series=chart.series;
while(series.length > 0) {
series[0].remove(false);
}
chart.redraw();
},2000);
四：向HighChart中添加data series(add new data series into high chart object)
向script的尾部追加如下代码，实现添加data series并刷新bar chart
setTimeout(function(){
chart.addSeries({
id:1,
name:"gloomyfish",
data:[1,2,3]
},false);
chart.addSeries({
id:2,
name:"wang-er-ma",
data:[5,2,1]
},false);
chart.addSeries({
id:3,
name:"zhang-san",
data:[4,8,6]
},false);
chart.redraw();
},2000);
addSeries方法中第二个参数false表示不重绘plot，等所有series添加完成调用redraw
方法重绘。
五：在chart中清除high chart官方链接(remove high chart official hyperlink in chart)
仔细观察在Bar Chart的右下角有个highchart的官方链接，当然希望去掉，只要在chart
声明中将credits声明设置改为false即可。代码如下：
credits: {enabled: false// remove high chart logo hyper-link},
六：完整Demo源码
<html>
<head>
<script src="static/jquery-1.9.1/jquery-1.9.1.min.js"></script>
<script src="static/highcharts-3.0.1/js/highcharts.js"></script>
<title>My Demo 1</title>
<script>
$(function() {
var chart; // initialization chart and actions
$(document).ready(function () {
chart = new Highcharts.Chart({
chart: {
renderTo: 'my_container',
type: 'column'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
credits: {
enabled: false // remove high chart logo hyper-link
},
series: [{
name: 'Jane',
data: [1, 0, 4]
}, {
name: 'John',
data: [5, 7, 3]
}]
}); // JQuery, mouse click event bind with dom buttons
$('#clear-button').on('click', function (e) {
clearPlot();
}); $('#refresh-button').on('click', function (e) {
refreshPlot();
});
}); // clear all series of the chart
function clearPlot() {
//console.log("clear plot data!!!");
var series=chart.series;
while(series.length > 0) {
series[0].remove(false);
}
chart.redraw();
}; function refreshPlot() {
//console.log("refresh plot data!!!");
chart.addSeries({
id:1,
name: "gloomyfish",
data: [1,2,3]
}, false);
chart.addSeries({
id:2,
name: "wang-er-ma",
data: [5,2,1]
}, false);
chart.addSeries({
id:3,
name: "zhang-san",
data: [4,8,6]
}, false); chart.redraw();
}; setTimeout(function(){
var series=chart.series;
while(series.length > 0) {
series[0].remove(false);
}
chart.redraw();
},2000); // add new series for the chart
setTimeout(function(){
chart.addSeries({
id:1,
name: "gloomyfish",
data: [1,2,3]
}, false);
chart.addSeries({
id:2,
name: "wang-er-ma",
data: [5,2,1]
}, false);
chart.addSeries({
id:3,
name: "zhang-san",
data: [4,8,6]
}, false); chart.redraw();
},2000);
});
</script>
</head>
<body>
<h1>High Chart Demo 1</h1>
<div id="my_container" style="width:600px; height:600px;"></div>
<div id="btn-group">
<button type="button" id="clear-button">Clear Plot</button>
<button type="button" id="refresh-button">Draw Plot</button>
</div>
</body>
</html>
运行效果如下：
HighChart学习-更新数据data Series与重绘的更多相关文章
- FAT32文件系统学习(3) —— 数据区(DATA区)
FAT32文件系统学习(3) —— 数据区(DATA区) 今天继续学习FAT32文件系统的数据区部分(Data区).其实这一篇应该是最有意思的,我们可以通过在U盘内放入一些文件,然后在程序中读取出来: ...
- EF 更新数据出现 System.Data.Entity.Infrastructure.DbUpdateConcurrencyException: 异常
EF6更新 数据出现 System.Data.Entity.Infrastructure.DbUpdateConcurrencyException: Store update, insert, or ...
- mybatis学习之路----批量更新数据两种方法效率对比
原文:https://blog.csdn.net/xu1916659422/article/details/77971696/ 上节探讨了批量新增数据,这节探讨批量更新数据两种写法的效率问题. 实现方 ...
- Oracle CDC (Change Data Capture)更新数据捕获——概述
Change Data Capture能高效识别并捕获数据的插入.修改和删除,使更新数据供个人或应用使用. CDC从oracle 9i开始引入,//TODO 在11G R2之后的版本里将取消支持,被O ...
- Cassandra1.2文档学习（10）—— 插入和更新数据
参考数据:http://www.datastax.com/documentation/cassandra/1.2/webhelp/index.html#cassandra/dml/dml_about_ ...
- flask+sqlite3+echarts3+ajax 异步更新数据
结构: /www | |-- /static |....|-- jquery-3.1.1.js |....|-- echarts.js(echarts3是单文件!!) | |-- /templates ...
- 数据可视化：Echart中k图实现动态阈值报警及实时更新数据
1 目标 使用Echart的k图展现上下阈值,并且当真实值超过上阈值或低于下阈值时候,标红报警. 2 实现效果 如下:
- android: SQLite更新数据
学习完了如何向表中添加数据,接下来我们看看怎样才能修改表中已有的数据. SQLiteDatabase 中也是提供了一个非常好用的 update()方法用于对数据进行更新,这个方法 接收四个参数,第一个 ...
- [译]Stairway to Integration Services Level 4 - 增量更新数据
在本文中, 我们说下增量更新数据:即将数据源中更新了的数据替换掉目标表中对应的数据. 更新代码 操作之前我们先把目标表e (dbo.Contact). 的数据改掉 Use AdventureWorks ...
随机推荐
- android studio之argument for @notnull parameter 'name'
1)进入刚安装的Android Studio目录下的bin目录.找到idea.properties文件,用文本编辑器打开.2)在idea.properties文件末尾添加一行: disable.and ...
- Android switch 中 case expressions must be constant expressions 错误
刚才导入android zxing 条码 的demo测试,发现出现如下错误 case expressions must be constant expressions 经检查,项目被设置成librar ...
- Thinkphp入门三—框架模板、变量（47）
原文:Thinkphp入门三-框架模板.变量(47) [在控制器调用模板] display() 调用当前操作名称的模板 display(‘名字’) 调用指定名字的模板文件 控制器调用模板四种方式 ...
- 【ASP.NET Web API教程】2.3.3 创建Admin控制器
原文:[ASP.NET Web API教程]2.3.3 创建Admin控制器 注:本文是[ASP.NET Web API系列教程]的一部分,如果您是第一次看本博客文章,请先看前面的内容. Part 3 ...
- android使用xfire webservice框架远程对sqlserver操作（包括增删改查）的实例！！已在真机上试验通过
前两天,公司有一个利用android远程操作sqlserver的项目,对此我是毫无头绪的,但也挺感兴趣的,于是开始上网搜索方法,网上有挺多方法了,发现使用webservice的挺多的,不过我对这些技术 ...
- Linux版EPUB阅读器
Linux版EPUB阅读器 如果说用平板电脑看书尚属主流的话,那么在电脑上读书就非常少见了.专注阅读16世纪的书是非常困难的了,没人希望后台蹦出QQ聊天窗口.但是如果你非要在电脑上打开电子书的话,那么 ...
- javascript addEventListener方法
addEventListener是一个侦听事件并处理相应的函数. DOM方法 addEventListener() 和 removeEventListener()是用来分配和删除事件的函数. 这两个方 ...
- HTML5开发桌面应用：选择node-webkit还是有道heX
近几年,移动应用和web2.0大行其道,相比之下.传统桌面应用程序开发显得相对冷清(包含该领域技术人才的后继力量),但在一些场景下,它依旧有其不可替代的优势. 将HTML5和Node.JS的技术优势. ...
- 用VC实现竖写汉字的方法
中国人自古就有自右至左.从上到下书写汉字的习惯.而当我们在自己所编写的应用程序中使用输出函数输出的总是自左至右的横排文字.有没有可能在我们的应用程序中实现竖写汉字的效果呢?笔者偶然发现了一种利用VC实 ...
- [置顶] dubbo管理控制台安装
dubbo管理控制台开源部分主要包含:路由规则,动态配置,服务降级,访问控制,权重调整,负载均衡,等管理功能. 1.下载dubbo 地址:http://code.alibabatech.com/mvn ...