Highchart 動態從庫中讀取數據

時間 2019-11-11

標籤 highchart 動態讀取數據简体版

原文原文鏈接

前臺頁面jspjavascript

<!-- 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的便利之處，就在數據的格式更佳靈活。開發人員可以更靈活的控制數據的傳遞。html

<!-- 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;
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。