用Highcharts在jsp页面中绘制图表

By
写代码

Highcharts 是一个用纯JavaScript编写的图标类库,提供了比较简单的方式来为网页插入漂亮的、交互式的图标。目前支持各种折线图、区域图、柱状图、散列图,以及几种图的混合使用,此外还支持仪表、地热、雷达、极区、金字塔、瀑布等专业的图表。和收费的FusionCharts和AnyCharts比起来,HighCharts免费(Free-Non-Commercial许可证),并且扁平化的设计感很有优势,并且官方提供了大量的示例供研究。

在jsp页面使用Highcharts

参照教程首先引入jquery库和highcharts.js文件,接着就可以在页面中使用了。如果只是新建静态图表,那么按照教程直接来就可以生成漂亮的图标了。但是如果要在jsp中使用,就需要用到json(或类似的数据序列化格式)和ajax的方法来搞定了。这里使用了struts2和tomcat7来设计,并且环境已经配置好。

1、新建Action

在src目录新建一个JsonAction.java的类,并定义数据,这里要显示每个季度的数值,使用了一个map来存储。

2、在struts.xml中指定action指向和跳转方式

接着,测试http://localhost:8080/ajaxAction,应该会返回如下

的json格式结果。

3、jsp页面中的调用

新建一个jsp页面,内容如下

页面中使用ajax方式载入了ajaxAction返回的json数据,接着分别存储keys和values,并据此来绘制图形,关于图形的绘制方式和各个属性,可以通过API查看。

去掉右下角highchart.com链接

在highcharts({…})方法里,增加

的选项即可去掉连接,或者根据描述,操作href、style、text等属性,自定义自己的链接和现实样式。

总结

既然使用Javascript,使用其他语言肯定也很简单的,对于希望在网站中展示基于html5互动图表的用户,Highcharts是个很不错的工具。

Comments: 4

  1. 占个沙发先,然后看不懂。囧

    2015年03月27日
  2. 上次我也用了,不过不是我在弄,我那个小组用js版本弄各种图表,还有一个是地图互动

    @zwwooooo 2015年04月09日
    • @zwwooooo 地图那个我也试了试,好牛逼的

      @venmax 2015年04月10日
  3. jsp的现在还没有深入学习~

    2015年05月28日

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*

:razz: