一&＃xff1a;HighChart介绍

基于JQuery的纯Javascript的图标库&＃xff0c;支持各种图表显示&＃xff0c;同时还支持Mootools

与Prototype详细版本支持在这里&＃xff1a;

支持目前市场几乎所有的主要浏览器IE, Chrome, FF,Safari, Opera等。其图形渲染完

全是是基于SVG与VML方式&＃xff0c;其中VML方式主要是兼容IE浏览器&＃xff0c;在IE9&＃43;及其它浏览

器上渲染技术都是基于SVG方式。下载与安装指导文档

->http://docs.highcharts.com/#home安装好以后&＃xff0c;建一个基本static web 项目&＃xff0c;如图

所示&＃xff1a;

二&＃xff1a;HighChart基本的Bar Chart演示

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

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

之间。导入JQuery与highchart库文件支持。代码如下&＃xff1a;

<scriptsrc&＃61;"static/jquery-1.9.1/jquery-1.9.1.min.js">script>

<scriptsrc&＃61;"static/highcharts-3.0.1/js/highcharts.js">script>

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

在浏览器中看到如下Bar Chart&＃xff1a;

三&＃xff1a;清除HighChart中的数据集(remove data series from high chart object)

代码修改&＃xff1a;

1.      把type&＃xff1a;’bar’ 改成type: ’column’ 其作用是让bar垂直显示

2.      向script尾部追加如下代码&＃xff0c;自动清除所有series然后刷新

            setTimeout(function(){

               var series&＃61;chart.series;            

               while(series.length > 0) {

                    series[0].remove(false);

                }

                chart.redraw();

           },2000);

四&＃xff1a;向HighChart中添加data series(add new data series into high chart object)

向script的尾部追加如下代码&＃xff0c;实现添加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&＃xff0c;等所有series添加完成调用redraw

方法重绘。

五&＃xff1a;在chart中清除high chart官方链接(remove high chart official hyperlink in chart)

仔细观察在Bar Chart的右下角有个highchart的官方链接&＃xff0c;当然希望去掉&＃xff0c;只要在chart

声明中将credits声明设置改为false即可。代码如下&＃xff1a;

credits: {enabled: false// remove high chart logo hyper-link},

六&＃xff1a;完整Demo源码

High Chart Demo 1