var btnObjct ; $(document).ready(function(){ //기간 라인차트 $("#viewchart").click(function() { btnObjct = $(this); drawChart(); }); // 차트보기 중단 $('#viewchartM').click(function(){ btnObjct = $(this); drawChart(); }); function drawChart() { var charttype = $("#charttype").val(); if(charttype == null || charttype == ""){ var charttype = "line"; } var cnt = $("input:checked[name='chartchk']:checked").length; if(cnt > 5){ alert("차트의 상품개수는 최대 5개입니다."); }else if(cnt == 0){ alert("선택된 체크박스가 없습니다."); } else if(cnt <= 5 || cnt > 0){ $("#chart").show(); $("#containerDiv").show(); $("#containerChart").show(); if (charttype == "line") { $("#reviewchart").focus(); } else { $("#viewchartBar").focus(); } // $("#containerChart").focus(); var cate = ($("#categories").val()).split(","); var arrgoodId = new Array(); var arr = new Array(); var j = 0 ; $("[name=chartchk]").each(function(){ if($(this).is(":checked")){ arrgoodId.push($(this).val()); $(this).find("td:hidden").val(); // alert($(this).find("td input:hidden").val()); for(var i=0;i{series.name} : {point.y:.1f} 원
', enabled : false, crosshairs: [true, true] }, navigation: { buttonOptions: { enabled: false } } , legend: { layout: 'vertical', align: 'right', verticalAlign: 'middle', borderWidth: 0 }, series: [{ name: arrgoodId[0], data: arr0 }, { name: arrgoodId[1], data: arr1 }, { name: arrgoodId[2], data: arr2 }, { name: arrgoodId[3], data: arr3 }, { name: arrgoodId[4], data: arr4 }] }); }else if(ncnt == 4){ $('#containerChart').highcharts({ chart: { type: charttype, zoomType: 'xy', //zoomType: 'xy' 'y' // 줌인. panning: true, panKey: 'shift', //plotBackgroundImage: 'C:/Users/yeajune/Desktop/Highcharts4/graphics/sobi.jpg' //배경이미지 선택 }, navigation: { buttonOptions: { enabled: false } }, credits: { text:"", href:"" }, exporting: { enabled: false }, title: { text: " ", // x: -20 //center }, xAxis: { categories: categories }, plotOptions: { series: { animation: { duration: 500 /// 라인이 그려지는 속도를느리게 함 } } }, yAxis: { floor: 0, // alternateGridColor: '#FDFFD5', labels: { format: '{value}원' }, title: { text: ' ' }, plotLines: [{ value: 1, width: 2, color: '#808080' }] }, tooltip: { positioner: function () { return { x: 80, y: 50 }; }, shadow: true, borderWidth: 1, backgroundColor: 'rgba(255,255,255,0.8)', //valueSuffix: '원', pointFormat: '{series.name} : {point.y:.1f} 원
', enabled : false, crosshairs: [true, true] }, legend: { layout: 'vertical', align: 'right', verticalAlign: 'middle', borderWidth: 0 }, series: [{ name: arrgoodId[0], data: arr0 }, { name: arrgoodId[1], data: arr1 }, { name: arrgoodId[2], data: arr2 }, { name: arrgoodId[3], data: arr3 }] }); }else if(ncnt == 3){ $('#containerChart').highcharts({ chart: { type: charttype, zoomType: 'xy', //zoomType: 'xy' 'y' // 줌인. panning: true, panKey: 'shift', //plotBackgroundImage: 'C:/Users/yeajune/Desktop/Highcharts4/graphics/sobi.jpg' //배경이미지 선택 }, navigation: { buttonOptions: { enabled: false } }, credits: { text:"", href:"" }, exporting: { enabled: false }, title: { text: " ", // x: -20 //center }, xAxis: { categories: categories }, plotOptions: { series: { animation: { duration: 500 /// 라인이 그려지는 속도를느리게 함 } } }, yAxis: { floor: 0, // alternateGridColor: '#FDFFD5', labels: { format: '{value}원' }, title: { text: ' ' }, plotLines: [{ value: 1, width: 2, color: '#808080' }] }, tooltip: { positioner: function () { return { x: 80, y: 50 }; }, shadow: true, borderWidth: 1, backgroundColor: 'rgba(255,255,255,0.8)', //valueSuffix: '원', pointFormat: '{series.name} : {point.y:.1f} 원
', enabled : false, crosshairs: [true, true] }, legend: { layout: 'vertical', align: 'right', verticalAlign: 'middle', borderWidth: 0 }, series: [{ name: arrgoodId[0], data: arr0 }, { name: arrgoodId[1], data: arr1 }, { name: arrgoodId[2], data: arr2 }] }); }else if(ncnt == 2){ $('#containerChart').highcharts({ chart: { type: charttype, zoomType: 'xy', //zoomType: 'xy' 'y' // 줌인. panning: true, panKey: 'shift', //plotBackgroundImage: 'C:/Users/yeajune/Desktop/Highcharts4/graphics/sobi.jpg' //배경이미지 선택 }, navigation: { buttonOptions: { enabled: false } }, credits: { text:"", href:"" }, exporting: { enabled: false }, title: { text: " ", // x: -20 //center }, xAxis: { categories: categories }, plotOptions: { series: { animation: { duration: 500 /// 라인이 그려지는 속도를느리게 함 } } }, yAxis: { floor: 0, // alternateGridColor: '#FDFFD5', labels: { format: '{value}원' }, title: { text: ' ' }, plotLines: [{ value: 1, width: 2, color: '#808080' }] }, tooltip: { positioner: function () { return { x: 80, y: 50 }; }, shadow: true, borderWidth: 1, backgroundColor: 'rgba(255,255,255,0.8)', //valueSuffix: '원', pointFormat: '{series.name} : {point.y:.1f} 원
', enabled : false, crosshairs: [true, true] }, legend: { layout: 'vertical', align: 'right', verticalAlign: 'middle', borderWidth: 0 }, series: [{ name: arrgoodId[0], data: arr0 }, { name: arrgoodId[1], data: arr1 }] }); }else{ $('#containerChart').highcharts({ chart: { type: charttype, zoomType: 'xy', //zoomType: 'xy' 'y' // 줌인. panning: true, panKey: 'shift', //plotBackgroundImage: 'C:/Users/yeajune/Desktop/Highcharts4/graphics/sobi.jpg' //배경이미지 선택 }, navigation: { buttonOptions: { enabled: false } }, credits: { text:"", href:"" }, exporting: { enabled: false }, title: { text: " ", // x: -20 //center }, xAxis: { categories: categories }, plotOptions: { series: { animation: { duration: 500 /// 라인이 그려지는 속도를느리게 함 } } }, yAxis: { floor: 0, // alternateGridColor: '#FDFFD5', labels: { format: '{value}원' }, title: { text: ' ' }, plotLines: [{ value: 1, width: 2, color: '#808080' }] }, tooltip: { positioner: function () { return { x: 80, y: 50 }; }, shadow: true, borderWidth: 1, backgroundColor: 'rgba(255,255,255,0.8)', //valueSuffix: '원', pointFormat: '{series.name} : {point.y:.1f} 원
', enabled : false, crosshairs: [true, true] }, legend: { layout: 'vertical', align: 'right', verticalAlign: 'middle', borderWidth: 0 }, series: [{ name: arrgoodId[0], data: arr0 }] }); } } } //15개 시도 바차트 $("[name=Aviewchart]").click(function(){ btnObjct = $(this); $("#chart").show(); $("#containerDiv").show(); $("#containerChart").show(); $("#viewchartEx").focus(); // $("#containerChart").focus(); var arr = new Array(); for(var i=0;i<=17;i++){ // console.log($(this).parent("td").find("input:hidden").eq(i).val()); arr.push($(this).parent("td").find("input:hidden").eq(i).val()); } $("#chartname").val(arr); var chartname = arr[0]; var Str1 =($("#chartname").val()).split(','); var arry = new Array(); for (var j=1;j < 18;j++){ arry.push(Str1[j]); } // console.log(arry); var arr0 =new Array(); for(var i=0 ; i <= 16 ; i++){ if(arry[i] == null ||arry[i] == "" ){ arr0[i] = (null); }else{ arr0[i] = Number(arry[i]); } } // console.log(arr0); $('#containerChart').highcharts({ chart: { type: 'column' }, credits: { text:"", href:"" }, title: { text:'' }, exporting: { enabled: false }, xAxis: { categories: ['서울','부산','대구','인천','광주','대전','울산','경기','강원','충북','충남','전북','전남','경북','경남','제주','세종'], labels: { rotation: -25, align: 'center', style: { fontSize: '10px', fontFamily: 'Verdana, sans-serif' } } }, plotOptions: { series: { allowPointSelect: true, animation: { duration: 500 /// 라인이 그려지는 속도를느리게 함 } } }, yAxis: { min: 0, labels: { format: '{value}원' }, title: { text: ' ' } }, legend: { enabled: false }, tooltip: { enabled : false, pointFormat: '[{series.name}] {point.y:.1f} 원', }, series: [{ name: chartname, data: arr0, dataLabels: { enabled: true, rotation: -90, color: 'black', align: 'right', x: 4, y: 10, style: { fontSize: '15px', fontFamily: 'Verdana, sans-serif', textShadow: '0 0 3px white' } } }] }); }); //단일지역 선택일자 바차트 $("#OAviewchartEx").click(function(){ btnObjct = $(this); var cnt = $("input:checked[name='chartchk']:checked").length; if(cnt > 5){ alert("차트의 상품개수는 최대 5개입니다."); }else if(cnt == 0){ alert("선택된 체크박스가 없습니다."); } else if(cnt <= 5 || cnt > 0){ $("#chart").show(); $("#containerDiv").show(); $("#containerChart").show(); // $("#containerChart").focus(); var areaname = $("#lname").val(); var arrgoodId = new Array(); var arr = new Array(); var arr0= new Array(); $("[name=chartchk]").each(function(){ if($(this).is(":checked")){ arrgoodId.push($(this).val()); arr.push($(this).parent("td").find("input:hidden").val()); // console.log(arr); } }); for(var i=0 ; i [{series.name}] {point.y:.1f} 원', enabled : false }, series: [{ name: chartname, data: arr0, dataLabels: { enabled: true, rotation: -90, color: 'black', align: 'right', x: 4, y: 10, style: { fontSize: '15px', fontFamily: 'Verdana, sans-serif', textShadow: '0 0 3px white' } } }] }); }); //바 + 라인 $("#viewchartMix").click(function(){ var cnt = $("input:checked[name='chartchk']:checked").length; if(cnt > 5){ alert("차트의 상품개수는 최대 5개입니다."); }else if(cnt == 0){ alert("선택된 체크박스가 없습니다."); } else if(cnt <= 5 || cnt > 0){ $("#chart").show(); $("#containerDiv").show(); $("#containerChart").show(); $("#viewchartMix").focus(); // $("#containerChart").focus(); var charttype =""; var cate = ($("#categories").val()).split(","); var arrgoodId = new Array(); var arr = new Array(); var j = 0 ; $("[name=chartchk]").each(function(){ if($(this).is(":checked")){ arrgoodId.push($(this).val()); $(this).find("td:hidden").val(); // alert($(this).find("td input:hidden").val()); for(var i=0;i{series.name} : {point.y:.1f} 원
', enabled : false, crosshairs: [true, true] }, legend: { layout: 'vertical', align: 'right', verticalAlign: 'middle', borderWidth: 0 }, series: [{ type: 'column', name: arrgoodId[0], data: arr0 }, { type: 'column', name: arrgoodId[1], data: arr1 }, { type: 'column', name: arrgoodId[2], data: arr2 }, { type: 'column', name: arrgoodId[3], data: arr3 }, { type: 'column', name: arrgoodId[4], data: arr4 },{ type: 'spline', name: arrgoodId[0], data: arr0 ,marker: { lineWidth: 4, lineColor: Highcharts.getOptions().colors[1], fillColor: 'white' } }, { type: 'spline', name: arrgoodId[1], data: arr1 ,marker: { lineWidth: 4, lineColor: Highcharts.getOptions().colors[2], fillColor: 'white' } }, { type: 'spline', name: arrgoodId[2], data: arr2 ,marker: { lineWidth: 4, lineColor: Highcharts.getOptions().colors[3], fillColor: 'white' } }, { type: 'spline', name: arrgoodId[3], data: arr3 ,marker: { lineWidth: 4, lineColor: Highcharts.getOptions().colors[4], fillColor: 'white' } }, { type: 'spline', name: arrgoodId[4], data: arr4 ,marker: { lineWidth: 4, lineColor: Highcharts.getOptions().colors[5], fillColor: 'white' } }] }); }else if(ncnt == 4){ $('#containerChart').highcharts({ chart: { zoomType: 'xy', //zoomType: 'xy' 'y' // 줌인. panning: true, panKey: 'shift', //plotBackgroundImage: 'C:/Users/yeajune/Desktop/Highcharts4/graphics/sobi.jpg' //배경이미지 선택 }, navigation: { buttonOptions: { enabled: false } }, credits: { text:"", href:"" }, title: { text: " ", // x: -20 //center }, xAxis: { categories: categories }, plotOptions: { series: { animation: { duration: 500 /// 라인이 그려지는 속도를느리게 함 } } }, yAxis: { floor: 0, // alternateGridColor: '#FDFFD5', labels: { format: '{value}원' }, title: { text: ' ' }, plotLines: [{ value: 1, width: 2, color: '#808080' }] }, tooltip: { positioner: function () { return { x: 80, y: 50 }; }, shadow: true, borderWidth: 1, backgroundColor: 'rgba(255,255,255,0.8)', //valueSuffix: '원', pointFormat: '{series.name} : {point.y:.1f} 원
', enabled : false, crosshairs: [true, true] }, legend: { layout: 'vertical', align: 'right', verticalAlign: 'middle', borderWidth: 0 }, series: [{ type: 'column', name: arrgoodId[0], data: arr0 }, { type: 'column', name: arrgoodId[1], data: arr1 }, { type: 'column', name: arrgoodId[2], data: arr2 }, { type: 'column', name: arrgoodId[3], data: arr3 },{ type: 'spline', name: arrgoodId[0], data: arr0 ,marker: { lineWidth: 4, lineColor: Highcharts.getOptions().colors[1], fillColor: 'white' } }, { type: 'spline', name: arrgoodId[1], data: arr1 ,marker: { lineWidth: 4, lineColor: Highcharts.getOptions().colors[2], fillColor: 'white' } }, { type: 'spline', name: arrgoodId[2], data: arr2 ,marker: { lineWidth: 4, lineColor: Highcharts.getOptions().colors[3], fillColor: 'white' } }, { type: 'spline', name: arrgoodId[3], data: arr3 ,marker: { lineWidth: 4, lineColor: Highcharts.getOptions().colors[4], fillColor: 'white' } }] }); }else if(ncnt == 3){ $('#containerChart').highcharts({ chart: { zoomType: 'xy', //zoomType: 'xy' 'y' // 줌인. panning: true, panKey: 'shift', //plotBackgroundImage: 'C:/Users/yeajune/Desktop/Highcharts4/graphics/sobi.jpg' //배경이미지 선택 }, navigation: { buttonOptions: { enabled: false } }, credits: { text:"", href:"" }, title: { text: " ", // x: -20 //center }, xAxis: { categories: categories }, plotOptions: { series: { animation: { duration: 500 /// 라인이 그려지는 속도를느리게 함 } } }, yAxis: { floor: 0, // alternateGridColor: '#FDFFD5', labels: { format: '{value}원' }, title: { text: ' ' }, plotLines: [{ value: 1, width: 2, color: '#808080' }] }, tooltip: { positioner: function () { return { x: 80, y: 50 }; }, shadow: true, borderWidth: 1, backgroundColor: 'rgba(255,255,255,0.8)', //valueSuffix: '원', pointFormat: '{series.name} : {point.y:.1f} 원
', enabled : false, crosshairs: [true, true] }, legend: { layout: 'vertical', align: 'right', verticalAlign: 'middle', borderWidth: 0 }, series: [{ type: 'column', name: arrgoodId[0], data: arr0 }, { type: 'column', name: arrgoodId[1], data: arr1 }, { type: 'column', name: arrgoodId[2], data: arr2 },{ type: 'spline', name: arrgoodId[0], data: arr0 ,marker: { lineWidth: 4, lineColor: Highcharts.getOptions().colors[1], fillColor: 'white' } }, { type: 'spline', name: arrgoodId[1], data: arr1 ,marker: { lineWidth: 4, lineColor: Highcharts.getOptions().colors[2], fillColor: 'white' } }, { type: 'spline', name: arrgoodId[2], data: arr2 ,marker: { lineWidth: 4, lineColor: Highcharts.getOptions().colors[3], fillColor: 'white' } }] }); }else if(ncnt == 2){ $('#containerChart').highcharts({ chart: { zoomType: 'xy', //zoomType: 'xy' 'y' // 줌인. panning: true, panKey: 'shift', //plotBackgroundImage: 'C:/Users/yeajune/Desktop/Highcharts4/graphics/sobi.jpg' //배경이미지 선택 }, navigation: { buttonOptions: { enabled: false } }, credits: { text:"", href:"" }, title: { text: " ", // x: -20 //center }, xAxis: { categories: categories }, plotOptions: { series: { animation: { duration: 500 /// 라인이 그려지는 속도를느리게 함 } } }, yAxis: { floor: 0, // alternateGridColor: '#FDFFD5', labels: { format: '{value}원' }, title: { text: ' ' }, plotLines: [{ value: 1, width: 2, color: '#808080' }] }, tooltip: { positioner: function () { return { x: 80, y: 50 }; }, shadow: true, borderWidth: 1, backgroundColor: 'rgba(255,255,255,0.8)', //valueSuffix: '원', pointFormat: '{series.name} : {point.y:.1f} 원
', enabled : false, crosshairs: [true, true] }, legend: { layout: 'vertical', align: 'right', verticalAlign: 'middle', borderWidth: 0 }, series: [{ type: 'column', name: arrgoodId[0], data: arr0 }, { type: 'column', name: arrgoodId[1], data: arr1 },{ type: 'spline', name: arrgoodId[0], data: arr0 ,marker: { lineWidth: 4, lineColor: Highcharts.getOptions().colors[1], fillColor: 'white' } }, { type: 'spline', name: arrgoodId[1], data: arr1 ,marker: { lineWidth: 4, lineColor: Highcharts.getOptions().colors[2], fillColor: 'white' } }] }); }else{ $('#containerChart').highcharts({ chart: { zoomType: 'xy', //zoomType: 'xy' 'y' // 줌인. panning: true, panKey: 'shift', //plotBackgroundImage: 'C:/Users/yeajune/Desktop/Highcharts4/graphics/sobi.jpg' //배경이미지 선택 }, navigation: { buttonOptions: { enabled: false } }, credits: { text:"", href:"" }, title: { text: " ", // x: -20 //center }, xAxis: { categories: categories }, plotOptions: { series: { animation: { duration: 500 /// 라인이 그려지는 속도를느리게 함 } } }, yAxis: { floor: 0, // alternateGridColor: '#FDFFD5', labels: { format: '{value}원' }, title: { text: ' ' }, plotLines: [{ value: 1, width: 2, color: '#808080' }] }, tooltip: { positioner: function () { return { x: 80, y: 50 }; }, shadow: true, borderWidth: 1, backgroundColor: 'rgba(255,255,255,0.8)', //valueSuffix: '원', pointFormat: '{series.name} : {point.y:.1f} 원
', enabled : false, crosshairs: [true, true] }, legend: { layout: 'vertical', align: 'right', verticalAlign: 'middle', borderWidth: 0 }, series: [{ type: 'column', name: arrgoodId[0], data: arr0 },{ type: 'spline', name: arrgoodId[0], data: arr0 ,marker: { lineWidth: 4, lineColor: Highcharts.getOptions().colors[1], fillColor: 'white' } }] }); } } }); // 차트 닫기 $('#viewchartEx').click(function () { btnObjct.focus(); $("#chart").hide(); $("#containerDiv").hide(); $("#containerChart").hide(); }); $('#viewchartBar').click(function () { $("#charttype").val("column"); drawChart(); }); $('#reviewchart').click(function () { $("#charttype").val("line"); drawChart(); }); });