[jqplot] jqplot 꺽은선 차트
[jqplot] jqplot 꺽은선 차트 (툴팁+legend 클릭시 보였다 안보였다(데이터))
JSP <script type="text/javascript" src="<c:url value="/resources/js/jquery/jquery.jqplot.js" />"></script> <script type="text/javascript" src="<c:url value="/resources/js/jquery/plugins/jqplot.highlighter.min.js" />"></script> <script type="text/javascript" src="<c:url value="/resources/js/jquery/plugins/jqplot.canvasTextRenderer.min.js" />"></script> <script type="text/javascript" src="<c:url value="/resources/js/jquery/plugins/jqplot.canvasAxisTickRenderer.min.js" />"></script> <script type="text/javascript" src="<c:url value="/resources/js/jquery/plugins/jqplot.canvasAxisLabelRenderer.min.js" />"></script> <script type="text/javascript" src="<c:url value="/resources/js/jquery/plugins/jqplot.pointLabels.min.js" />"></script> <script type="text/javascript" src="<c:url value="/resources/js/jquery/plugins/jqplot.enhancedLegendRenderer.min.js" />"></script> <script type="text/javascript" src="<c:url value="/resources/js/jquery/plugins/jqplot.barRenderer.min.js" />"></script> <script type="text/javascript" src="<c:url value="/resources/js/jquery/plugins/jqplot.dateAxisRenderer.min.js" />"></script> <script type="text/javascript" src="<c:url value="/resources/js/jquery/plugins/jqplot.categoryAxisRenderer.min.js" />"></script> <link rel="stylesheet" type="text/css" href="<c:url value="/resources/css/jquery/jquery.jqplot.css" />"> <style> <!-- .jqplot-yaxis-label { width:70px !important; } --> </style> <div id="chart1" style="width :850px; height:450px;"></div>
|
|
var ticks = new Array(); // x축의 tick값 var listData = new Array(); // DB값 var chatData = new Array(); // 차트값 var listSeries = new Array(); // 구분값 legend var setMaxMinlistData = new Array(); // min,max를 찾기하기 위한 배열생성 //DB데이터를 차트에 넣어줄 값으로 row씩 배열에 넣어줌 <c:forEach var="vo" items="${list }"> listData.push( "${vo.month1 }","${vo.month2 }", "${vo.month3 }","${vo.month4 }", "${vo.month5 }","${vo.month6 }", "${vo.month7 }","${vo.month8 }", "${vo.month9 }","${vo.month10 }", "${vo.month11 }","${vo.month12 }"); listSeries.push(("${vo.eiwpwName}").toString()); chatData.push(listData); listData = new Array(); //1row씩 넣기위해 배열 초기화
//차트의 Min,Max 설정을 위한 배열값을 push setMaxMinlistData.push("${vo.month1 }","${vo.month2 }", "${vo.month3 }","${vo.month4 }", "${vo.month5 }","${vo.month6 }", "${vo.month7 }","${vo.month8 }", "${vo.month9 }","${vo.month10 }", "${vo.month11 }","${vo.month12 }"); </c:forEach> // 전체 data 중 max, min값을 찾는다. var maxValue = Math.max.apply(null,setMaxMinlistData); // 전체 data배열 max값 var minValue = Math.min.apply(null,setMaxMinlistData); // 전체 data배열 min값 if(maxValue == 0){ maxValue = 5; // 모든 데이터 배열의 값이 0이면 차트 max 속성값 5로 변경해줌. }else{ maxValue += maxValue; // 배열 max값의 2배를 차트 max 속성값으로 잡아줌. } var series = []; for(var i = 0; i < listSeries.length; i++){ var label = listSeries[i]; series.push({label:label}); } console.log(chatData); <c:forEach begin="1" end="12" var="month"> ticks.push('<c:out value="${month }" /><spring:message code="message.month" />'); </c:forEach> $(document).ready(function(){ plot1 = $.jqplot('chart1',chatData,{ title: '<c:out value="${searchVO.searchYear}" /><spring:message code="message.year" /> <c:out value="${searchVO.searchRpName}" /> <spring:message code="environment.waste.trend.label.incidence" />', series: series, seriesColors:['#ff4040','#ee7621','#ffb90f','#9ac0cd','#6495ed','#FFB2D9','#8041D9','#2F9D27','#662500', '#483D8B','#2F4F4F','#ADFF2F','#20B2AA','#FFDEAD','#98FB98','#FF6347','#2E8B57','#DDA0DD'],
seriesDefaults : { renderer : $.jqplot.BezierCurveRenderer, rendererOptions: { padding: 2, sliceMargin: 2, showDataLabels: true, highlightMouseOver: true }
/* pointLabels: { show:true, formatString: '%.1f'}, */
}, legend: { renderer: $.jqplot.EnhancedLegendRenderer, show: true, stackedValue : true, location: 'e', placement: 'outside', width: 'auto', },
highlighter: { show: true, useAxesFormatters: false, tooltipFormatString:'%s', tooltipContentEditor: function (str, seriesIndex, pointIndex, data) {
var dataArray = new Array(); dataArray = str.split(','); var html = ""; html += dataArray[0]; html += "월"; html += " <br>처리량 : "; html += dataArray[1]; html += "(톤)"; html += " </div>"; return html; }
}, cursor: { style: 'pointer', show: true, showTooltip: false },
axes:{ xaxis: { renderer: $.jqplot.CategoryAxisRenderer, ticks: ticks, tickOptions: { fontSize: '8pt', /* formatString:'%d' */ } }, yaxis:{ label:'<spring:message code="environment.waste.trend.label.incidence.unit" />', min:minValue, //min값 max:maxValue, //max값 numberTicks: 10, //눈금개수 tickOptions:{formatString:'%.1f', } } }, }); });
|