HighChart学习-更新数据dataSeries与重绘

一: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学习-更新数据data Series与重绘

二:HighChart基本的Bar Chart演示

打开链接->http://docs.highcharts.com/#your-first-chart

拷贝your first chart中第二步中的全部script脚本到mydemo.html中的

之间。导入JQuery与highchart库文件支持。代码如下:

"static/jquery-1.9.1/jquery-1.9.1.min.js">

"static/highcharts-3.0.1/js/highcharts.js">

在tomcat中部署demo1之后访问如下URL:http://localhost:8080/demo1/mydemo.html

在浏览器中看到如下Bar Chart:

HighChart学习-更新数据data Series与重绘

三:清除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源码

    My Demo 1 	   

High Chart Demo 1

运行效果如下:

HighChart学习-更新数据data Series与重绘


分享文章:HighChart学习-更新数据dataSeries与重绘
标题网址:http://myzitong.com/article/ipcigj.html