[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', } } }, }); });