■ Highchart 작업을 할 때 차트 바깥의 div크기가 변경될 경우가 있다. 바깥의 크기는 변경되었는데 차트는 그에 맞게 변경이 되지 않아 차트 모양이 이상하게 보인다.
■ 이와 같이 외부 div와 hichart의 크기가 달라진 경우에는 reflow함수를 사용한다.
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script src="https://code.highcharts.com/highcharts.js"></script> <script language="javascript"> $(document).ready(function() { var chart = Highcharts.chart('container', { xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], showEmpty: false }, yAxis: { showEmpty: false }, series: [{ allowPointSelect: true, data: [ // use names for display in pie data labels ['January', 29.9], ['February', 71.5], ['March', 106.4], ['April', 129.2], ['May', 144.0], ['June', 176.0], ['July', 135.6], ['August', 148.5], { name: 'September', y: 216.4, selected: true, sliced: true }, ['October', 194.1], ['November', 95.6], ['December', 54.4] ], marker: { enabled: false }, showInLegend: true }] }); // width 변경 $('#widthchange').click(function () { var width = $("#container").css("width"); console.log(width); if( width=="600px" ) $("#container").css("width","800px"); else $("#container").css("width","600px"); }); // chart 다시 그리기 $('#redraw').click(function () { chart.reflow(); }); }); </script> <div id="container" style="width:600px;height:400px;border:1px solid #000000;margin:20px;"></div> <button id="widthchange">width change</button> <button id="redraw">redraw</button>
- 자바스크립트 숫자에 천단위 추가 2023년 12월 28일
- javascript 객체 정렬(object sort) 2022년 3월 23일
- autocomplete=”off” 자동완성 기능 없애기 2022년 3월 16일
- JSRender Helper 함수 예제 2021년 6월 15일
- Highcharts error #17 2019년 7월 10일
- Highchart TypeError: c.init is not a function 2019년 7월 10일
- Highchart 크기 조정 2019년 7월 8일
- Highcharts error #13 2019년 7월 8일
- npm 설치, NodeJS 설치 2019년 6월 18일
- javascript forEach 예제 2019년 5월 3일
- Highcharts update event 2019년 3월 26일
- CKEditor Tip 2019년 3월 25일
- javascript에서 날짜 구하기 2019년 1월 3일
- Javascript 문자열 Byte 길이 구하는 방법 2018년 2월 27일
- javascript this 2018년 2월 13일
- javascript Set 예제 2018년 2월 13일
- addEventListener – element에 이벤트 등록 예제 2016년 5월 31일
- javascript에서 간단한 form을 만들기 2016년 5월 31일
- javascript switch문 예제 2016년 5월 31일
- setInterval : 반복 작업 수행 2016년 5월 11일
- 인터넷 익스플로러 버전 체크(IE 버전) 2016년 1월 22일
- javascript 순환문 2015년 12월 29일
- javascript 문자열 2015년 12월 29일
- 크롬에서 자바스크립트 실행 시간 확인 2015년 10월 14일
- javascript setTimeout(delay) 2015년 10월 13일
- 자바스크립트, jQuery 데이터 타입 2015년 1월 25일
- 자바스크립트 for문 2015년 1월 25일
- 자바스크립트 문자열 길이, 배열의 길이 2015년 1월 25일