Highcharts之自定义标签

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

 

        看一张官网上的图片:

Highcharts之自定义标签_第1张图片


          通过这张图,来简单介绍一下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方法:

package com.ljh.utils.tags;

import java.io.IOException;
import javax.servlet.jsp.JspException;
import javax.servlet.jsp.tagext.SimpleTagSupport;
import com.ljh.utils.HighchartsData2;

/**
 * 折线图显示值的
 * @author ljh
 *
 */
public class HighChartsTag2 extends SimpleTagSupport {
	
	//定义了其它的数据包装类
	private HighchartsData2 highchartsData2;
	private String id;
	private String width="400px";
	private String height="100px";

	public HighchartsData2 getHighchartsData2() {
		return highchartsData2;
	}
	public void setHighchartsData2(HighchartsData2 highchartsData2) {
		this.highchartsData2 = highchartsData2;
	}
	public String getId() {
		return id;
	}
	public void setId(String id) {
		this.id = id;
	}
	public String getWidth() {
		return width;
	}
	public void setWidth(String width) {
		this.width = width;
	}
	public String getHeight() {
		return height;
	}
	public void setHeight(String height) {
		this.height = height;
	}
	
	
	//重写doTag方法
	@Override
	public void doTag() throws JspException, IOException {
		StringBuffer buffer=new StringBuffer();
		buffer.append("<script type='text/javascript'>\n");
		buffer.append("   $(function(){\n");
		buffer.append("		 $(document).ready(function(){\n");
		buffer.append("			$('#"+id+"').highcharts({\n");
		buffer.append("				chart: { type: 'line'},\n");
		buffer.append("				title: { text: '"+highchartsData2.getTitle()+"'},\n");
		buffer.append("				xAxis: { title: {text: '"+highchartsData2.getX_title()+"'}, \n");
		buffer.append("						 categories:"+formatObject(highchartsData2.getDateStr())+"},\n");
		buffer.append("				yAxis: { title: { text: '"+highchartsData2.getY_title()+"'}},\n");
		buffer.append("				plotOptions: {line: {dataLabels: {enabled: true},\n");
		buffer.append("				enableMouseTracking: false}},\n");
		buffer.append("				series: [{\n");
		buffer.append("					name: '"+highchartsData2.getDataName()+"',\n");
		buffer.append("					data:"+formatObject(highchartsData2.getData())+"}]\n");
		buffer.append("});});});</script>\n");
		buffer.append("<div id='"+id+"' style='width:"+width+";height:"+height+"'></div>");
		//将文件进行输出展示
		getJspContext().getOut().write(buffer.toString());
	}
	
	/**
	 * 将传过来的数组进行转化为[Object1,Object2……]
	 * @param objects
	 * @return
	 */
	private String formatObject(Object[] objects)
	{
		StringBuffer buffer = new StringBuffer();
		buffer.append("[");
		for(Object object : objects)
		{
			buffer.append(object+",");
		}
		
		String result = buffer.substring(0, buffer.length()-1)+"]";
		return result;
	}

}

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

<?xml version="1.0" encoding="UTF-8" ?>
<taglib xmlns="http://java.sun.com/xml/ns/javaee"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-jsptaglibrary_2_1.xsd"
    version="2.1">

	<description>highCharts标签</description>
    <tlib-version>1.0</tlib-version>
    <short-name>highCharts2</short-name>
    <uri>http://www.highcharts.com/highcharts2</uri>
    <tag>
		<description>折线图</description>
        <name>lineChart2</name>
		<tag-class>com.ljh.utils.tags.HighChartsTag2</tag-class>
		<body-content>empty</body-content>
 		<attribute>
			<name>highchartsData2</name>
			<required>true</required>
			<rtexprvalue>true</rtexprvalue>
		</attribute>
		<attribute>
			<name>id</name>
			<required>true</required>
			<rtexprvalue>false</rtexprvalue>
		</attribute>
		<attribute>
			<name>width</name>
			<required>false</required>
			<rtexprvalue>false</rtexprvalue>
		</attribute>
		<attribute>
			<name>height</name>
			<required>false</required>
			<rtexprvalue>false</rtexprvalue>
		</attribute>
    </tag>
</taglib>

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

<%@ taglib prefix="highCharts2" uri="http://www.highcharts.com/highcharts2" %>

<highCharts2:llineChart2 data="${Data}" id="d" height="230px" width="650px" />

 

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

 

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


你可能感兴趣的:(Highcharts,自定义标签,折线图)