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

一：HighChart介绍

超过十多年行业经验，技术领先，服务至上的经营模式，全靠网络和口碑获得客户，为自己降低成本，也就是为客户降低成本。到目前业务范围包括了：成都做网站、成都网站设计，成都网站推广，成都网站优化，整体网络托管，成都微信小程序，微信开发，成都app开发，同时也可以让客户的网站和网络营销和我们一样获得订单和生意！

基于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中的

之间。导入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中的数据集(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源码

     	   
High Chart Demo 1
 
 
 	Clear Plot 	Draw Plot 
  

运行效果如下：

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

文章名称：HighChart学习-更新数据dataSeries与重绘-创新互联
网站路径：http://cqcxhl.com/article/djjdph.html