Highchart 动态从库中读取数据

最新推荐文章于 2024-05-02 15:45:27 发布

chenshi2812

最新推荐文章于 2024-05-02 15:45:27 发布

阅读量104

点赞数

文章标签： json java javascript ViewUI

原文链接：https://my.oschina.net/u/225084/blog/151982

版权

前台页面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>

后台使用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;
}

转载于:https://my.oschina.net/u/225084/blog/151982

chenshi2812

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Highchart 动态从库中读取数据

前台页面jsp<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>...
复制链接

扫一扫