Highcharts之自定義標(biāo)簽
來源：程序員人生 發(fā)布時(shí)間：2014-10-13 05:22:04 閱讀次數(shù)：2937次
前邊有看過FusionChartsFree(Flash+JS+XML三項(xiàng)技術(shù)結(jié)合來顯示圖表：柱狀圖，折線圖，餅圖等等),JFreeChart(利用Java語言來實(shí)現(xiàn)的各種圖形的展示)。而這篇博客我們來看另一種圖表顯示工具Highcharts(純粹利用JS來實(shí)現(xiàn)各種圖表的展示)。
看一張官網(wǎng)上的圖片：
通過這張圖，來簡單介紹一下Highcharts可以實(shí)現(xiàn)的功能，或者說那些是我們可以操作改變的。
English | 翻譯及說明 |
Title | 標(biāo)題：當(dāng)然就是圖表的名字 |
subTitle | 副標(biāo)題：對(duì)圖表進(jìn)一步的說明 |
xAxis | X軸：可以設(shè)置坐標(biāo)值以及相應(yīng)的標(biāo)題單位等 |
yAxis | Y軸：這里只需要y軸標(biāo)題，只會(huì)根據(jù)圖表值的大小進(jìn)行自動(dòng)匹配顯示 |
Seriers | 數(shù)值串：也就是圖表顯示的值，在項(xiàng)目中一般從數(shù)據(jù)庫中取出進(jìn)行動(dòng)態(tài)顯示 |
Exporting | 這個(gè)是進(jìn)行導(dǎo)出圖表，打印圖表功能 |
Tooltip | 這個(gè)是圖表上，當(dāng)鼠標(biāo)點(diǎn)擊時(shí)，是否進(jìn)行值的顯示 |
…… | …… |
當(dāng)然這里還有很多功能，例如向圖標(biāo)x軸y軸進(jìn)行標(biāo)志線的添加，重點(diǎn)區(qū)域的添加，數(shù)據(jù)上點(diǎn)擊事件的添加等等！這些我們可以通過官網(wǎng)上進(jìn)行具體的學(xué)習(xí)：http://www.hcharts.cn/index.php
對(duì)于Highcharts如何進(jìn)行使用，看官網(wǎng)上的Demo最合適不過了，我們可以通過參照例子，將需要?jiǎng)討B(tài)展示的數(shù)據(jù)在數(shù)據(jù)庫中獲取，讓其動(dòng)起來即可。這里想說的是如何一次編程多次使用，也就是如何更加方便的使用Highcharts。
這里想提的就是自定義標(biāo)簽。大家使用html自帶的標(biāo)簽，el表達(dá)式，JSTL標(biāo)簽等等，我們直接使用即可，是非常方便的，只需要我們指定其不同的屬性，即可顯示不同的效果。而我們?nèi)绾我矊?shí)現(xiàn)此功能呢？像一些js,html等需要在jsp頁面上顯示的東西，我們都可以進(jìn)行封裝，自定義為我們自己的標(biāo)簽，進(jìn)行重復(fù)高效的使用。Highcharts展示圖形主要是通過一個(gè)<div>和操縱此DIV的JS代碼，所以我們可以自定義標(biāo)簽來進(jìn)行封裝。其實(shí)以后只要類似的功能，我們都可以通過自定義標(biāo)簽進(jìn)行實(shí)現(xiàn)。
好，廢話了一些，來看一下自定義標(biāo)簽的幾大步驟吧：
1，編寫自定義標(biāo)簽的輸出類，這里需要繼承：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 {
//定義了其它的數(shù)據(jù)包裝類
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'>
");
buffer.append(" $(function(){
");
buffer.append(" $(document).ready(function(){
");
buffer.append(" $('#"+id+"').highcharts({
");
buffer.append(" chart: { type: 'line'},
");
buffer.append(" title: { text: '"+highchartsData2.getTitle()+"'},
");
buffer.append(" xAxis: { title: {text: '"+highchartsData2.getX_title()+"'},
");
buffer.append(" categories:"+formatObject(highchartsData2.getDateStr())+"},
");
buffer.append(" yAxis: { title: { text: '"+highchartsData2.getY_title()+"'}},
");
buffer.append(" plotOptions: {line: {dataLabels: {enabled: true},
");
buffer.append(" enableMouseTracking: false}},
");
buffer.append(" series: [{
");
buffer.append(" name: '"+highchartsData2.getDataName()+"',
");
buffer.append(" data:"+formatObject(highchartsData2.getData())+"}]
");
buffer.append("});});});</script>
");
buffer.append("<div id='"+id+"' style='width:"+width+";height:"+height+"'></div>");
//將文件進(jìn)行輸出展示
getJspContext().getOut().write(buffer.toString());
}
/**
* 將傳過來的數(shù)組進(jìn)行轉(zhuǎn)化為[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，編寫配置對(duì)應(yīng)的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標(biāo)簽</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標(biāo)簽一樣進(jìn)行引入我們自定義使用的標(biāo)簽，然后使用：
<%@ taglib prefix="highCharts2" uri="http://www.highcharts.com/highcharts2" %>
<highCharts2:llineChart2 data="${Data}" id="d" height="230px" width="650px" />
這樣基本就完成了，看界面是不是很少的東西。我可以在自定義標(biāo)簽的Java類中寫多種圖形的選擇，然后后臺(tái)傳入不同的數(shù)據(jù)，進(jìn)行不同圖標(biāo)，不同數(shù)據(jù)的圖表展示，是不是非常好呢？
編程需要在實(shí)踐的不斷的思考，不斷來提高，思考才能獲取其中的快樂。不斷思考如何提升，不斷思考自己編程的思維，自己編程的方式，點(diǎn)點(diǎn)滴滴的思考，如何更好，如何更高，如何更如……
生活不易，碼農(nóng)辛苦
如果您覺得本網(wǎng)站對(duì)您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈(zèng)
