Highcharts之自定义标签

 前边有看过FusionChartsFree(Flash+JS+XML三项技术结合来显示图表:柱状图,折线图,饼图等等),JFreeChart(利用Java语言来实现的各种图形的展示)。而这篇博客我们来看另一种图表显示工具Highcharts(纯粹利用JS来实现各种图表的展示)

        看一张官网上的图片:


 

          通过这张图,来简单介绍一下Highcharts可以实现的功能,或者说那些是我们可以操作改变的。

English

翻译及说明

Title

标题:当然就是图表的名字

subTitle

副标题:对图表进一步的说明

xAxis

X轴:可以设置坐标值以及相应的标题单位等

yAxis

Y轴:这里只需要y轴标题,只会根据图表值的大小进行自动匹配显示

Seriers

数值串:也就是图表显示的值,在项目中一般从数据库中取出进行动态显示

Exporting

这个是进行导出图表,打印图表功能

Tooltip

这个是图表上,当鼠标点击时,是否进行值的显示

……

……

          当然这里还有很多功能,例如向图标xy轴进行标志线的添加,重点区域的添加,数据上点击事件的添加等等!这些我们可以通过官网上进行具体的学习:http://www.hcharts.cn/index.php

          对于Highcharts如何进行使用,看官网上的Demo最合适不过了,我们可以通过参照例子,将需要动态展示的数据在数据库中获取,让其动起来即可。这里想说的是如何一次编程多次使用,也就是如何更加方便的使用Highcharts

         这里想提的就是自定义标签。大家使用html自带的标签,el表达式,JSTL标签等等,我们直接使用即可,是非常方便的,只需要我们指定其不同的属性,即可显示不同的效果。而我们如何也实现此功能呢?像一些js,html等需要在jsp页面上显示的东西,我们都可以进行封装,自定义为我们自己的标签,进行重复高效的使用。Highcharts展示图形主要是通过一个<div>和操纵此DIVJS代码,所以我们可以自定义标签来进行封装。其实以后只要类似的功能,我们都可以通过自定义标签进行实现。

         好,废话了一些,来看一下自定义标签的几大步骤吧:

 

         1,编写自定义标签的输出类,这里需要继承:SimpleTagSupport,重写里边的doTag方法:

  1. package com.ljh.utils.tags;  
  2.   
  3. import java.io.IOException;  
  4. import javax.servlet.jsp.JspException;  
  5. import javax.servlet.jsp.tagext.SimpleTagSupport;  
  6. import com.ljh.utils.HighchartsData2;  
  7.   
  8. /** 
  9.  * 折线图显示值的 
  10.  * @author ljh 
  11.  * 
  12.  */  
  13. public class HighChartsTag2 extends SimpleTagSupport {  
  14.       
  15.     //定义了其它的数据包装类  
  16.     private HighchartsData2 highchartsData2;  
  17.     private String id;  
  18.     private String width=“400px”;  
  19.     private String height=“100px”;  
  20.   
  21.     public HighchartsData2 getHighchartsData2() {  
  22.         return highchartsData2;  
  23.     }  
  24.     public void setHighchartsData2(HighchartsData2 highchartsData2) {  
  25.         this.highchartsData2 = highchartsData2;  
  26.     }  
  27.     public String getId() {  
  28.         return id;  
  29.     }  
  30.     public void setId(String id) {  
  31.         this.id = id;  
  32.     }  
  33.     public String getWidth() {  
  34.         return width;  
  35.     }  
  36.     public void setWidth(String width) {  
  37.         this.width = width;  
  38.     }  
  39.     public String getHeight() {  
  40.         return height;  
  41.     }  
  42.     public void setHeight(String height) {  
  43.         this.height = height;  
  44.     }  
  45.       
  46.       
  47.     //重写doTag方法  
  48.     @Override  
  49.     public void doTag() throws JspException, IOException {  
  50.         StringBuffer buffer=new StringBuffer();  
  51.         buffer.append(“<script type=’text/javascript’>\n”);  
  52.         buffer.append(”   $(function(){\n”);  
  53.         buffer.append(”      $(document).ready(function(){\n”);  
  54.         buffer.append(”         $(‘#”+id+“‘).highcharts({\n”);  
  55.         buffer.append(”             chart: { type: ‘line’},\n”);  
  56.         buffer.append(”             title: { text: ‘”+highchartsData2.getTitle()+“‘},\n”);  
  57.         buffer.append(”             xAxis: { title: {text: ‘”+highchartsData2.getX_title()+“‘}, \n”);  
  58.         buffer.append(”                      categories:”+formatObject(highchartsData2.getDateStr())+“},\n”);  
  59.         buffer.append(”             yAxis: { title: { text: ‘”+highchartsData2.getY_title()+“‘}},\n”);  
  60.         buffer.append(”             plotOptions: {line: {dataLabels: {enabled: true},\n”);  
  61.         buffer.append(”             enableMouseTracking: false}},\n”);  
  62.         buffer.append(”             series: [{\n”);  
  63.         buffer.append(”                 name: ‘”+highchartsData2.getDataName()+“‘,\n”);  
  64.         buffer.append(”                 data:”+formatObject(highchartsData2.getData())+“}]\n”);  
  65.         buffer.append(“});});});</script>\n”);  
  66.         buffer.append(“<div id='”+id+“‘ style=’width:”+width+“;height:”+height+“‘></div>”);  
  67.         //将文件进行输出展示  
  68.         getJspContext().getOut().write(buffer.toString());  
  69.     }  
  70.       
  71.     /** 
  72.      * 将传过来的数组进行转化为[Object1,Object2……] 
  73.      * @param objects 
  74.      * @return 
  75.      */  
  76.     private String formatObject(Object[] objects)  
  77.     {  
  78.         StringBuffer buffer = new StringBuffer();  
  79.         buffer.append(“[“);  
  80.         for(Object object : objects)  
  81.         {  
  82.             buffer.append(object+“,”);  
  83.         }  
  84.           
  85.         String result = buffer.substring(0, buffer.length()-1)+“]”;  
  86.         return result;  
  87.     }  
  88.   
  89. }  

 

         2,编写配置对应的tld文件,里边的一些属性的意义,我们可以百度谷歌一下即可:

  1. <?xml version=“1.0” encoding=“UTF-8” ?>  
  2. <taglib xmlns=“http://java.sun.com/xml/ns/javaee”  
  3.     xmlns:xsi=“http://www.w3.org/2001/XMLSchema-instance”  
  4.     xsi:schemaLocation=“http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-jsptaglibrary_2_1.xsd”  
  5.     version=“2.1”>  
  6.   
  7.     <description>highCharts标签</description>  
  8.     <tlib-version>1.0</tlib-version>  
  9.     <short-name>highCharts2</short-name>  
  10.     <uri>http://www.highcharts.com/highcharts2</uri>  
  11.     <tag>  
  12.         <description>折线图</description>  
  13.         <name>lineChart2</name>  
  14.         <tag-class>com.ljh.utils.tags.HighChartsTag2</tag-class>  
  15.         <body-content>empty</body-content>  
  16.         <attribute>  
  17.             <name>highchartsData2</name>  
  18.             <required>true</required>  
  19.             <rtexprvalue>true</rtexprvalue>  
  20.         </attribute>  
  21.         <attribute>  
  22.             <name>id</name>  
  23.             <required>true</required>  
  24.             <rtexprvalue>false</rtexprvalue>  
  25.         </attribute>  
  26.         <attribute>  
  27.             <name>width</name>  
  28.             <required>false</required>  
  29.             <rtexprvalue>false</rtexprvalue>  
  30.         </attribute>  
  31.         <attribute>  
  32.             <name>height</name>  
  33.             <required>false</required>  
  34.             <rtexprvalue>false</rtexprvalue>  
  35.         </attribute>  
  36.     </tag>  
  37. </taglib>  

 

       3,最后在界面像引入JSTL标签一样进行引入我们自定义使用的标签,然后使用:

  1. <%@ taglib prefix=“highCharts2” uri=“http://www.highcharts.com/highcharts2” %>  
  2.   
  3. <highCharts2:llineChart2 data=“${Data}” id=“d” height=“230px” width=“650px” />  

 

        这样基本就完成了,看界面是不是很少的东西。我可以在自定义标签的Java类中写多种图形的选择,然后后台传入不同的数据,进行不同图标,不同数据的图表展示,是不是非常好呢?

        编程需要在实践的不断的思考,不断来提高,思考才能获取其中的快乐。不断思考如何提升,不断思考自己编程的思维,自己编程的方式,点点滴滴的思考,如何更好,如何更高,如何更如……

标签