echarts 차트 그리기

echarts.apache.org/en/index.html

Apache ECharts (incubating)

 

 

 

 

echarts로 그린 간단한 그래프

                                                                

 

 

 

maria DB 데이터 

 

<!-- prepare a DOM container with width and height -->
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<div class="">
	<div id="chart" style="width: 600px; height: 400px;"></div>
</div>

<script language="javascript" type="text/javascript">
	g_cttPage = (function() {

		// 초기 설정 정의
		$(document).ready(function() {
			fn_initSetting();
		});

		// 이벤트 정의

		function fn_initSetting() {

			var params = {};

			params["fn_success"] = function(data, params) {
				fn_sourceGenSuccess(data, params);

				console.log(data);
			}
			fn_ajax("/echart/inEchart.do", params);
		}
		;
		function fn_sourceGenSuccess(data, params) {

			var a = [];
			var b = [];
			var c = [];
			var d = [];
			var e = [];

			for (var i = 15; i >= 0; i--) {
				if (data.result[i].ex_chart == 1) {
					d.push(data.result[i].ex_week);
				}
			}

			for (var i = 15; i >= 0; i--) {
				if (data.result[i].ex_chart == 1) {
					a.push(data.result[i].ex_value);
				} else if (data.result[i].ex_chart == 2) {
					b.push(data.result[i].ex_value);
				} else if (data.result[i].ex_chart == 3) {
					c.push(data.result[i].ex_value);
					//c.push(data.result[i].ex_week);
				}
			}
			for (var i = 15; i >= 0; i--) {
				if (data.result[i].ex_chart == 3) {
					e.push(data.result[i].ex_week);
				}
			}

			console.log('a', a);
			console.log('b', b);
			console.log('c', c[1]);
			console.log('e', e[0]);

			// based on prepared DOM, initialize echarts instance
			var myChart = echarts.init(document.getElementById('chart'));

			// specify chart configuration item and data
			var option = {
				title : {
					text : 'ECharts entry example'
				},
				tooltip : {},
				legend : {
					data : [ 'Sales' ]
				},
				xAxis : {
					type : 'category',
					data : d
				},
				yAxis : {
					type : 'value'
				},
				series : [ {
					data : a,
					type : 'line'
				}, {
					data : b,
					type : 'line'
				}, {
					data : [ [ e[0], c[0] ], [ e[1], c[1] ] ],
					type : 'line'
				} ]
			};
			// use configuration item and data specified to show chart
			myChart.setOption(option);

		}
	})();
</script>

 

위의 초기설정과 이벤트정의 부분은 미리 정의된 함수가 있으니 fn_sourceGenSuccess부분만 참고해야한다.