Aloner Coding

동적 테이블을 만드는 방법은 다양하고 기능적인 차이에 따라 난도도 천차만별이지만 여태까지 회사에서 일하며 알게된 두 가지 방법을 소개하고자 한다. 1. createElement() 함수 사용 정확한 함수 내부 코드는 모르지만 파라미터로 들어가는 html문법을 만들어주는 것 같다. HTML 삽입 미리보기할 수 없는 소스 코드팬에선 데이터가 없기 때문에 임의의 스트링을 데이터라고 생각하고 넣었다. 반복문 안에 'tr', 'td'를 만드는 createElement함수를 넣는다면 리스트 개수만큼 행을 동적으로 만드는 테이블을 만들 수 있다. 2. html 문법을 string 변수를 통해 jQuery 로 전달 이름은 그냥 내가 임의로 정했다. html 문법인지는 모르겠지만 편의상 정함. HTML 삽입 미리보기할 ..

때에 따라 자바스크립트에서 화면의 텍스트를 수정해야 할 때가 있다. 이럴 때 innerHTML 을 자주 썼는데 검색을 해보니 innerHTML은 크로스 사이트 스크립트(XSS) 공격에 취약하다고 한다 대안으로 innerText와 textContent를 많이 비교하여 사용하던데 innerText는 파이어폭스에서 지원하지 않는다고 하여 textContent를 대안으로 써보니 아래와 같은 문제가 있었다. HTML 삽입 미리보기할 수 없는 소스 바로 텍스트만 수정할 땐 문제가 없었지만 html태그와 같이 수정하려고 하니 textContent는 html태그를 문자열로 인식하여 저장하는 듯하다. 그래서 야매지만 내가 생각해낸 방법은 element를 가져올 때 div를 가져오는 것이 아닌 html태그에 id를 넣어 ..

Morris.Bar({ element: 'graphx1', data: [ {year: '2008', value: 20}, {year: '2009', value: 10}, {year: '2010', value: 5}, {year: '2011', value: 13}, {year: '2012', value: 18} ], xkey: 'year', ykeys: ['value'], barColors: ['#26B99A'], labels: ['수치'], barRatio: 0.4, xLabelAngle: 25, gridTextSize: 10, resize: true }) 만약 data를 동적 리스트로 받는다면 {xkey: 데이터 x축 값, ykey: 데이터 y축 값} 형태로 리스트에 저장 후 data: 리스트 명, x..

x축의 Label의 길이가 너무 길면 중간중간 라벨이 생략된 채로 차트가 나오게 됩니다. ..., xAxis: [ { ..., axisLabel: { rotate: 30, interval: 0 } } ], ... axisLabel에 rotate 로 회전을 주고 interval 을 0으로 하면 모든 라벨이 보입니다. 참고 : https://stackoverflow.com/questions/44076557/echarts-how-to-show-all-axis-labels ECharts: how to show all axis labels? Echarts seems to have a nice feature that automatically chooses which labels to display depending..

대부분의 사용법은 echart 문서에 있기 때문에 참고하시기 바랍니다. https://echarts.apache.org/en/option.html#title Documentation - Apache ECharts echarts.apache.org morris chart는 resize라는 옵션이 있어 resize:true 만 해줘도 자동으로 크기를 조정하지만 아쉽게도 echart는 옵션에 기능이 없어서 자체적으로 구현을 해야합니다. echart말고도 다른 차트에서도 사용가능 할테니 참고하시기 바랍니다. var echart = echarts.init(document.getElementById('echart1')); echart.setOption({ ... }); $function(){ $(window).on..