메리

y축 그리드 커스텀 설정, 옵션 (valueAxis)

1. valueAxis 생성

//valueAxis 생성
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

2. 최대/최소 (min, max)

// 최대,최소 설정. 미설정시 주어진 데이터 범위 내에서 알아서 보기좋게 생성함
valueAxis.min = 0;
valueAxis.max = 100;

3. 최대/최소 (strictMinMax)

//min, max를 미설정한경우 데이터의 최소/최대값을 y축 그리드의 최소/최대값으로 지정함
//썩 보기 좋지 않다. 미설정시 기본값은 false인듯.
valueAxis.strictMinMax = true;

4. 뒤집기(inversed)

//오름차순, 내림차순 설정. 미설정시 false.
//true 설정 시 y축 그리드 위아래가 뒤집힘
valueAxis.renderer.inversed = true;

5. inside

//y축 라벨이 표 안으로 들어옴
valueAxis.renderer.inside=true;

6. 라벨 숨김(minLabelPosition)

//최소값 라벨 숨김 설정
//0.01 = y축 전체 길이의 1%에 해당하는 부분
valueAxis.renderer.minLabelPosition = 0.01;

7. 투명도(strokeOpacity)

//y축 획의 투명도
//미설정시 기본 0인듯하며 1 설정시 불투명함
valueAxis.renderer.line.strokeOpacity = 1;

8. 두께 (strokeWidth)

// y축 획의 두께
valueAxis.renderer.line.strokeWidth = 2;

9. 표시 위치(opposite)

//y축 획 표시 위치.
//미설정시 기본 왼쪽, true 설정시 오른쪽
valueAxis.renderer.opposite = true;

10. 글자 색(label fill)

//y축 라벨 글자 색 
valueAxis.renderer.labels.template.fill = "#ffa200";

11. 선 색 (line stroke)

//y축 획의 색
valueAxis.renderer.line.stroke = "#ffa200";

12. y축 그리드 간격 (minGridDistance)

//y축 그리드의 최소간격
valueAxis.renderer.minGridDistance = 30;

13. 범례 표시 (title)

valueAxis.title.text="percentage";

시리즈에 적용하기

 series.yAxis = valueAxis;

여러개의 시리즈를 생성할 때

여러개의 y축을 사용하고 싶은경우 

시리즈 생성할때마다 valueAxis를 생성해주면 된다

성신여대 애정 마라샹궈.

마라룽샤 먹었다. 존맛  ㅠ ㅠ 

마라맛이 증말 굉장하고

우동면 말아먹는거 증말 존맛 

비닐장갑 주는디

마라 기름은 장갑을 뚫고 침투하기땜시 

화장실에서 비누로 빡빡 씻었당 

살은.. 얼마 안 되지만.. 증말 맛있었다

그리고 이집은 볶음밥 맛집

볶음밥 꼭 먹어야됨. 볶음밥을 시킨다면 절대 후회하지 않지.

마라룽샤를 시킨다면 볶음밥을 꼭.

마라룽샤의 얼얼한 맛을 볶음밥으로 중화~!!~!1

• 온쫄면 7천원
• 비빔쫄면 7천원
• 새우튀김 쫄면 9천원
• 냉쫄면(여름) 안먹어봄.

우동같은데 우동도 아닌것이 참 맛있었다

또먹고싶다 

수요일 휴무

javascript 에서 DataTable 생성시 발생하는 에러

개빡쳐

원인은 다음과 같다.

1. 필요한 라이브러리가 로드되지 않은 경우

2. jquery 라이브러리가 중복돼서 로드된 경우

3. 라이브러리 로드 순서

실제로 jquery 라이브러리가 중복돼서 저런 에러가 났었다.

1. 필요한 라이브러리가 로드되었는지 확인

<!--로컬에 넣어놓은거임-->
<script src="js/lib/jquery/jquery.dataTables.js"></script>
<script src="js/lib/datatables/dataTables.bootstrap4.js"></script>
<script src="js/lib/datatables/dataTables.buttons.min.js"></script>
<script src="js/lib/datatables/buttons.html5.min.js"></script>
<script src="js/lib/datatables/dataTables.responsive.js"></script>

DataTable을 사용하는 페이지 우클릭 > Network > All 에서 DataTable로 검색해보면

라이브러리가 로드되었는지 확인할 수 있다.

2. jquery 라이브러리가 중복되어 로드되었는지 확인 

  <!-- jquery 라이브러리가 두 개 있어서 아래꺼 주석처리하니 정상동작함 ㅠ-->
  <script src="js/lib/jquery/jquery-latest.min.js"></script>
  <!-- <script src="js/lib/jquery/jquery-1.12.4.js"></script> -->

html파일 상단 소스도 확인하고

js 파일로 따로 빼놓은 소스도 확인하고

html 코드 중간에 <script>로 박아넣은 소스도 확인하자 ^.ㅠ

개고생함

3. 라이브러리 로드 순서

로드 순서도 영향있다고 하는데 아직 안 겪어봐서 모르겠다 

두 방법 중 택 1

data가 string 으로 표현된경우

* JSON 파일 내용(myJson.json)

이 방법은 사용해보니 데이터를 한 줄로 적어놔야 했음..

data='[{"data1":"a","data2":"b"},{"data1":"a1","data2":"b2"}]'

1. JSON 파일 소스연결 

<script src="../json/myJson.json" type="text/javascript"></script>

2. 소스내에서 파싱해서 걍 쓰면 댐~!~! 

let mydata = JSON.parse(data);

data가 object로 표현된 경우

* JSON 파일 내용(myJson.json)

data=
	[{
    	"data1":"a",
    	"data2":"b"},
        {
        "data1":"a1",
        "data2":"b2"}
     ]

1. JSON 파일 소스연결 

<script src="../json/myJson.json" type="text/javascript"></script>

2. 파싱할때 stringify 사용

let mydata = JSON.parse(JSON.stringify(data));
console.log(mydata);

var toDate = new Date($("#toDate").val());
var fromDate = new Date($("#fromDate").val());
var dateGap = Math.ceil(
      (toDate.getTime() - fromDate.getTime()) / (1000 * 3600 * 24)
    );

ex)

fromDate : 2021-04-30

toDate : 2021-05-01

dateGap : 1 

없는 데이터(undefined인 데이터에) 배열로 접근하려고 해서 발생.

데이터는 JSON 데이터로 다음과 같다

data='[{"date":"20210514","avg":{"data1":"a","data2":"b","data2":"c"},
	"min":{"data1":"a","data2":"b","data2":"c"},
	"max":{"data1":"a","data2":"b","data2":"c"}}]'

배열로 만들어놓고 반복문으로 접근해서 처리하려 했는데.. 

TypeError: Cannot read property '0' of undefined 에러가 나면서 안 됨 

var arr = ["avg","min","max"];
var arr2 = ["data1","data2","data3","data4"];

for(var i=0; i<data.length; i++){
	for(var x=0; x<arr.length; x++){
    	for(var y=0; y<arr.length; y++){
        	if(data[i].arr[x].arr2[y]==null){
            	data[i].arr[x].arr2[y]="-";
            }
        }
    }
}

임의로 배열을 만들어서 index로 접근하면 안되나보다

구래서 다 뺐더니 됨 

for(var i=0; i<data.length; i++){
	if(data[i].avg.data1==null){
		data[i].avg.data1="-";
	}
}

//클릭 이벤트 연결
$(".Check").click(function () {
 	//방금 클릭한 dom의 id값 가져오기
	let checkedId = $(this).attr("id");
	//방금 클릭한 dom의 name값 가져오기
	let checkedName = $(this).attr("name");
	//방금 클릭한 dom의 class값 가져오기
	let checkedClass = $(this).attr("class"); 
    
	//id로 요소 선택하여 check여부 컨트롤
	document.getElementById(checkedId).checked=true;
	//class 이름으로 요소(들) 선택하여 check여부 컨트롤
	document.getElementsByClassName(checkedClass).checked=false;
	//Name으로 요소(들) 선택하여 check여부 컨트롤
	document.getElementsByName(checkedName).checked=false;
});

체크한 checkbox object 찾기 

 //class 명으로 dom 선택(checkbox들임)
 let obj = document.getElementsByClassName("optionCheck");
 
 //loop돌며 checked여부 검사
 for (var i = 0; i < obj.length; i++) {
      if (obj[i].checked == true) {
      //체크되었으면 체크 해제 
        obj[i].checked=false;
      }
  }

document.ready로 기존 DOM로딩 후 change 이벤트 걸기

$(document).ready(function () {
	$("#type").change(function () {
 		alert("test")
	});
});

동적으로 생성된 DOM에 change 이벤트 걸기

$(document).on('change','#type',function(){
	alert("test");
});

juery 필요. head에 jquery cdn 추가

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

1. 한 페이지에 나타낼 글 수 선택 HTML

<select id="dataPerPage">
        <option value="10">10개씩보기</option>
        <option value="15">15개씩보기</option>
        <option value="20">20개씩보기</option>
</select>

2. 페이징 표시할 부분 HTML

<ul id="pagingul">
</ul>

3. 데이터 표시할 테이블 HTML

<span id="displayCount"></span>
<table id="dataTableBody">
</table>

4. 페이징 처리 준비를 위한 JavaScript

let totalData; //총 데이터 수
let dataPerPage; //한 페이지에 나타낼 글 수
let pageCount = 10; //페이징에 나타낼 페이지 수
let globalCurrentPage=1; //현재 페이지
let dataList; //표시하려하는 데이터 리스트

$(document).ready(function () {
 //dataPerPage 선택값 가져오기
 dataPerPage = $("#dataPerPage").val();
 
 $.ajax({ // ajax로 데이터 가져오기
	method: "GET",
	url: "https://url/data?" + data,
	dataType: "json",
	success: function (d) {
	   //totalData(총 데이터 수) 구하기
	   totalData = d.data.length;
           //데이터 대입
           dataList=d.data;
 });
 
 //글 목록 표시 호출 (테이블 생성)
 displayData(1, dataPerPage);
 
 //페이징 표시 호출
 paging(totalData, dataPerPage, pageCount, 1);
});

5. 글 목록 표시 함수

//현재 페이지(currentPage)와 페이지당 글 개수(dataPerPage) 반영
function displayData(currentPage, dataPerPage) {

  let chartHtml = "";

//Number로 변환하지 않으면 아래에서 +를 할 경우 스트링 결합이 되어버림.. 
  currentPage = Number(currentPage);
  dataPerPage = Number(dataPerPage);
  
  for (
    var i = (currentPage - 1) * dataPerPage;
    i < (currentPage - 1) * dataPerPage + dataPerPage;
    i++
  ) {
    chartHtml +=
      "<tr><td>" +
      dataList[i].d1 +
      "</td><td>" +
      dataList[i].d2 +
      "</td><td>" +
      dataList[i].d3 +
      "</td></tr>";
  } //dataList는 임의의 데이터임.. 각 소스에 맞게 변수를 넣어주면 됨...
  $("#dataTableBody").html(chartHtml);
}

6. 페이징 표시 함수 

function paging(totalData, dataPerPage, pageCount, currentPage) {
  console.log("currentPage : " + currentPage);

  totalPage = Math.ceil(totalData / dataPerPage); //총 페이지 수
  
  if(totalPage<pageCount){
    pageCount=totalPage;
  }
  
  let pageGroup = Math.ceil(currentPage / pageCount); // 페이지 그룹
  let last = pageGroup * pageCount; //화면에 보여질 마지막 페이지 번호
  
  if (last > totalPage) {
    last = totalPage;
  }

  let first = last - (pageCount - 1); //화면에 보여질 첫번째 페이지 번호
  let next = last + 1;
  let prev = first - 1;

  let pageHtml = "";

  if (prev > 0) {
    pageHtml += "<li><a href='#' id='prev'> 이전 </a></li>";
  }

 //페이징 번호 표시 
  for (var i = first; i <= last; i++) {
    if (currentPage == i) {
      pageHtml +=
        "<li class='on'><a href='#' id='" + i + "'>" + i + "</a></li>";
    } else {
      pageHtml += "<li><a href='#' id='" + i + "'>" + i + "</a></li>";
    }
  }

  if (last < totalPage) {
    pageHtml += "<li><a href='#' id='next'> 다음 </a></li>";
  }

  $("#pagingul").html(pageHtml);
  let displayCount = "";
  displayCount = "현재 1 - " + totalPage + " 페이지 / " + totalData + "건";
  $("#displayCount").text(displayCount);


  //페이징 번호 클릭 이벤트 
  $("#pagingul li a").click(function () {
    let $id = $(this).attr("id");
    selectedPage = $(this).text();

    if ($id == "next") selectedPage = next;
    if ($id == "prev") selectedPage = prev;
    
    //전역변수에 선택한 페이지 번호를 담는다...
    globalCurrentPage = selectedPage;
    //페이징 표시 재호출
    paging(totalData, dataPerPage, pageCount, selectedPage);
    //글 목록 표시 재호출
    displayData(selectedPage, dataPerPage);
  });
}

7. 페이지 번호 클릭시

$("#dataPerPage").change(function () {
    dataPerPage = $("#dataPerPage").val();
    //전역 변수에 담긴 globalCurrent 값을 이용하여 페이지 이동없이 글 표시개수 변경 
    paging(totalData, dataPerPage, pageCount, globalCurrentPage);
    displayData(globalCurrentPage, dataPerPage);
 });

페이징 부분 CSS

ul {
    text-align: center;
    display: inline-block;
    border: 1px solid #ccc;
    border-right: 0;
	padding-left :0;
}
ul li {
    text-align: center;
    float: left;
	list-style:none;

}

ul li a {
    display: block;
    font-size: 14px;
	color: black;
    padding: 9px 12px;
    border-right: solid 1px #ccc;
    box-sizing: border-box;
	text-decoration-line:none;
}

ul li.on {
    background: #eda712;
}

ul li.on a {
    color: #fff;
}

관련글) JAVA Controller에서 모듈을 이용한 클라이언트 페이징처리

https://mchch.tistory.com/305