一: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与重绘的更多相关文章

  1. FAT32文件系统学习(3) —— 数据区(DATA区)

    FAT32文件系统学习(3) —— 数据区(DATA区) 今天继续学习FAT32文件系统的数据区部分(Data区).其实这一篇应该是最有意思的,我们可以通过在U盘内放入一些文件,然后在程序中读取出来: ...

  2. EF 更新数据出现 System.Data.Entity.Infrastructure.DbUpdateConcurrencyException: 异常

    EF6更新 数据出现 System.Data.Entity.Infrastructure.DbUpdateConcurrencyException: Store update, insert, or  ...

  3. mybatis学习之路----批量更新数据两种方法效率对比

    原文:https://blog.csdn.net/xu1916659422/article/details/77971696/ 上节探讨了批量新增数据,这节探讨批量更新数据两种写法的效率问题. 实现方 ...

  4. Oracle CDC (Change Data Capture)更新数据捕获——概述

    Change Data Capture能高效识别并捕获数据的插入.修改和删除,使更新数据供个人或应用使用. CDC从oracle 9i开始引入,//TODO 在11G R2之后的版本里将取消支持,被O ...

  5. Cassandra1.2文档学习(10)—— 插入和更新数据

    参考数据:http://www.datastax.com/documentation/cassandra/1.2/webhelp/index.html#cassandra/dml/dml_about_ ...

  6. flask+sqlite3+echarts3+ajax 异步更新数据

    结构: /www | |-- /static |....|-- jquery-3.1.1.js |....|-- echarts.js(echarts3是单文件!!) | |-- /templates ...

  7. 数据可视化:Echart中k图实现动态阈值报警及实时更新数据

    1 目标 使用Echart的k图展现上下阈值,并且当真实值超过上阈值或低于下阈值时候,标红报警. 2 实现效果 如下:

  8. android: SQLite更新数据

    学习完了如何向表中添加数据,接下来我们看看怎样才能修改表中已有的数据. SQLiteDatabase 中也是提供了一个非常好用的 update()方法用于对数据进行更新,这个方法 接收四个参数,第一个 ...

  9. [译]Stairway to Integration Services Level 4 - 增量更新数据

    在本文中, 我们说下增量更新数据:即将数据源中更新了的数据替换掉目标表中对应的数据. 更新代码 操作之前我们先把目标表e (dbo.Contact). 的数据改掉 Use AdventureWorks ...

随机推荐

  1. 基于visual Studio2013解决面试题之0603调整数组

     题目

  2. jquery 下拉多选插件

    Jquery多选下拉列表插件jquery multiselect功能介绍及使用 Chosen 替代样式表 Bootstrap Chosen

  3. ASP.NET之Application、Session和Cookie的差别

    在Asp.net中Application.Session和Cookie都能够保存信息,那么它们有什么不同呢? 一.首先Application是在server端建立一个状态变量,存储于server的全局 ...

  4. 纯后端尝试写一个前端slide插件

    概述 由于项目组前端人员缺失,又赶上需要在手机端做一个slide效果的页面,所以只能自己硬着头皮上了,写的很简单,请大家不要笑话,只是拿出来分享下,大家先看下完成后的效果,如下: 过程 看了效果图是不 ...

  5. ConnectivityManager

    ConnectivityManager 主要管理网络连接的相关的类它主要负责的是1 监视网络连接状态 包括(Wi-Fi, GPRS, UMTS, etc)2 当网络状态改变时发送广播通知3 当网络连接 ...

  6. ecshop 微信支付插件

    眼下已完毕支付測试,可以支付成功,支付逻辑自己实现.后台通知.发货通知.订单查询未測. 当中用到了redis 下载

  7. Dom4j和Xpath(转)

    1.DOM4J简介 DOM4J是 dom4j.org 出品的一个开源 XML 解析包.DOM4J应用于 Java 平台,采用了 Java 集合框架并完全支持 DOM,SAX 和JAXP. DOM4J使 ...

  8. MVC之国际化

    MVC之国际化 前言 在项目中遇到国际化语言的问题是常有的事情,之前在做关于MVC国际化语言时,刚开始打算全部利用AngularJS来实现,但是渐渐发现对于页面Title难以去控制其语言转换,于是对于 ...

  9. QLineEdit 自动完成(使用setCompleter,内含一个ListView)

    -------------------------------------CompleteLineEdit.h------------------------------------- #ifndef ...

  10. nohup sort -k1 -n -t$'\t' ./bigfile.16 -o./test/bigfile.16.ok &

    nohup sort -k1 -n -t$'\t' ./bigfile.16 -o./test/bigfile.16.ok &