Highchart - 梦想修炼场

前台页面jsp

<!-- lang: java -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="${ctx}/common/chartJs/highcharts.js"></script>
<script src="${ctx}/common/chartJs/modules/exporting.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
	
	$.post("${ctx}/chart/updateChartAction2.do", function(json) {
	    new Highcharts.Chart({
		chart : {
		    //将图表显示至 container div
		    renderTo : 'container',
		    //char的类型 line, spline, area, areaspline, column, bar, pie and scatter
		    type : 'line',
		    //上边距
		    marginRight : 130,
		    //下边距
		    marginBottom : 45,
		    //不显示动画(性能)
		    animation : false
		},
		
		//标题
		title : {
		    text : 'Monthly Average Temperature',
		    //The x position of the title relative to the alignment within chart.spacingLeft and chart.spacingRight. Defaults to 0.
		    x : 0
		},
		
		//子标题
		subtitle : {
		    text : 'Source: WorldClimate.com',
		    x : 0
		},
		
		//x轴 标题
		xAxis : {
		    //Can be one of "linear", "logarithmic", "datetime" or "category".
		    type : 'category'
		},
		
		//y轴 标题
		yAxis : {
		    title : {
			text : '测试数据(%)'
		    },
		    labels : {
			format : '{value} %'
		    },
		    //基准线
		    plotLines : [ {
			//基准线类型 点线
			dashStyle: 'Dash',
			//The position of the line in axis units.
			value : 80,
			//The width or thickness of the plot line.
			width : 1,
			//y轴上的刻度线颜色
			color : '#EE0000'
		    } ]
		},
		
		//当鼠标放在point上时，显示的单位/后缀
		tooltip : {
		    //是否显示tip
		    enabled: true,
		    //是否可以比较
		    shared: false,
		    //可现实小数位数
		    valueDecimals: 1,
		    //前缀
		    valuePrefix : '',
		    //后缀
		    valueSuffix : '%'
		},

		//绘图项设置
		plotOptions : {
		    line : {
			//超过阀值的颜色
			color: '#FF0000',
			//未超过阀值后的颜色
			   negativeColor: '#0088FF',
			   //阀值
			threshold : 80,
			//线条  是否趋势成动画显示
			animation: {
			    duration: 2000
			}
		    }
		},
		
		//图例框
		legend : {
		    enabled: true,
		    //The layout of the legend items. Can be one of "horizontal" or "vertical".
		    layout : 'vertical',
		    //The horizontal alignment of the legend box within the chart area. Valid values are "left", "center" and "right"
		    align : 'left',
		    //The vertical alignment of the legend box. Can be one of "top", "middle" or "bottom". 
		    //Vertical position can be further determined by the y option. Defaults to bottom.
		    verticalAlign : 'top',
		    //The x offset of the legend relative to it's horizontal alignment align within chart.
		    x : 0,
		    //The vertical offset of the legend relative to it's vertical alignment verticalAlign within chart.
		    y : 100,
		    //The width of the drawn border around the legend. Defaults to 1.
		    borderWidth : 1
		},
		
		//去掉highChart网站连接url
		credits : {
		    enable : true
		},
		
		//去掉导出按钮
		exporting : {
		    enabled : true
		},
		
		//数据，个人认为这种方法，最强之处就在于series传值完全通过json。
		series : json
	    });
	    
	}, "json");

    });
</script>
</head>
<body>
<div id="container" style="min-width: 400px; height: 420px; margin: 0 auto"></div>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

<html>

<head>

<title>Highcharts Example</title>

$(document).ready(function() {

$.post("${ctx}/chart/updateChartAction2.do", function(json) {

new Highcharts.Chart({

chart : {

//将图表显示至 container div

renderTo : 'container',

//char的类型 line, spline, area, areaspline, column, bar, pie and scatter

type : 'line',

//上边距

marginRight : 130,

//下边距

marginBottom : 45,

//不显示动画(性能)

animation : false

//标题

title : {

text : 'Monthly Average Temperature',

//The x position of the title relative to the alignment within chart.spacingLeft and chart.spacingRight. Defaults to 0.

x : 0

//子标题

subtitle : {

text : 'Source: WorldClimate.com',

x : 0

//x轴标题

xAxis : {

//Can be one of "linear", "logarithmic", "datetime" or "category".

type : 'category'

//y轴标题

yAxis : {

title : {

text : '测试数据(%)'

labels : {

format : '{value} %'

//基准线

plotLines : [ {

//基准线类型点线

dashStyle: 'Dash',

//The position of the line in axis units.

value : 80,

//The width or thickness of the plot line.

width : 1,

//y轴上的刻度线颜色

color : '#EE0000'

} ]

//当鼠标放在point上时，显示的单位/后缀

tooltip : {

//是否显示tip

enabled: true,

//是否可以比较

shared: false,

//可现实小数位数

valueDecimals: 1,

//前缀

valuePrefix : '',

//后缀

valueSuffix : '%'

//绘图项设置

plotOptions : {

line : {

//超过阀值的颜色

color: '#FF0000',

//未超过阀值后的颜色

negativeColor: '#0088FF',

//阀值

threshold : 80,

//线条是否趋势成动画显示

animation: {

duration: 2000

}

//图例框

legend : {

enabled: true,

//The layout of the legend items. Can be one of "horizontal" or "vertical".

layout : 'vertical',

//The horizontal alignment of the legend box within the chart area. Valid values are "left", "center" and "right"

align : 'left',

//The vertical alignment of the legend box. Can be one of "top", "middle" or "bottom".

//Vertical position can be further determined by the y option. Defaults to bottom.

verticalAlign : 'top',

//The x offset of the legend relative to it's horizontal alignment align within chart.

x : 0,

//The vertical offset of the legend relative to it's vertical alignment verticalAlign within chart.

y : 100,

//The width of the drawn border around the legend. Defaults to 1.

borderWidth : 1

//去掉highChart网站连接url

credits : {

enable : true

//去掉导出按钮

exporting : {

enabled : true

//数据，个人认为这种方法，最强之处就在于series传值完全通过json。

series : json

});

}, "json");

});

</script>

</head>

<body>

</body>

</html>

后台使用json传送数据。这里使用json的便利之处，就在数据的格式更佳灵活。开发人员能够更灵活的控制数据的传递。

<!-- lang: java -->
/**
 * 方法二：组织成json传送到前台
 */
public void updateChartAction2(){
    List<Chart> c1 = chartService.getChartByName("beijing");
    List<Chart> c2 = chartService.getChartByName("shanghai");
    try {
        JSONObject obj1 = this.writeJSON("beijing", c1);
        JSONObject obj2 = this.writeJSON("shanghai", c2);
        
        /**
         *   组合成
         *  [
         *    name：xxx
         *    data: {[x1,y1],[x2,y2], ... }
         *   ]
         */
        JSONArray all = new JSONArray();
        all.put(obj1);
        all.put(obj2);
        
        HttpServletResponse response = ServletActionContext.getResponse();
        response.setCharacterEncoding("UTF-8");
        response.getWriter().write(all.toString());
        response.getWriter().flush();
    } catch (IOException e) {
        e.printStackTrace();
    }
}

public JSONObject writeJSON(String nameVlu, List<Chart> list) {
    // 组合成{[x1,y1],[x2,y2], ... }
    JSONArray jsonArray = new JSONArray();
    for (int i = 0; i < list.size(); i++) {
        JSONArray sub = new JSONArray();
        sub.put(list.get(i).getcTime());
        sub.put(list.get(i).getCdata());
        jsonArray.put(sub);
    }

    /**
     * 组合成 name：xxx data: {[x1,y1],[x2,y2], ... }
     */
    JSONObject jsonObject = new JSONObject();
    jsonObject.put("name", nameVlu);
    jsonObject.put("data", jsonArray);

    return jsonObject;
}

/**

* 方法二：组织成json传送到前台

public void updateChartAction2(){

List<Chart> c1 = chartService.getChartByName("beijing");

List<Chart> c2 = chartService.getChartByName("shanghai");

try {

JSONObject obj1 = this.writeJSON("beijing", c1);

JSONObject obj2 = this.writeJSON("shanghai", c2);

/**

* 组合成

* [

* name：xxx

* data: {[x1,y1],[x2,y2], ... }

* ]

JSONArray all = new JSONArray();

all.put(obj1);

all.put(obj2);

HttpServletResponse response = ServletActionContext.getResponse();

response.setCharacterEncoding("UTF-8");

response.getWriter().write(all.toString());

response.getWriter().flush();

} catch (IOException e) {

e.printStackTrace();

}

public JSONObject writeJSON(String nameVlu, List<Chart> list) {

// 组合成{[x1,y1],[x2,y2], ... }

JSONArray jsonArray = new JSONArray();

for (int i = 0; i < list.size(); i++) {

JSONArray sub = new JSONArray();

sub.put(list.get(i).getcTime());

sub.put(list.get(i).getCdata());

jsonArray.put(sub);

}

/**

* 组合成 name：xxx data: {[x1,y1],[x2,y2], ... }

JSONObject jsonObject = new JSONObject();

jsonObject.put("name", nameVlu);

jsonObject.put("data", jsonArray);

return jsonObject;

}

梦想修炼场

简单而不平庸

标签归档：Highchart

Highchart 动态从库中读取数据