■ 참조(복사해서 붙여넣었어요!ㅠ)
■ Highcharts에서 차트를 그리고 사용자의 이벤트에 따라서 차트 타이틀이나 데이터 라벨, 마커 등을 변경하고자 할 때 사용하는 update함수에 대한 예제이다.
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script src="https://code.highcharts.com/highcharts.js"></script> <script src="pilot.js"></script> <div id="container" style="width:900px;height:400px"></div> <button id="name">Toggle name</button> <button id="data-labels">Toggle data labels</button> <button id="markers">Toggle point markers</button> <button id="color">Toggle color</button> <button id="column" style="margin-left: 2em">Column</button> <button id="line">Line</button> <button id="spline">Spline</button> <button id="area">Area</button> <button id="areaspline">Areaspline</button> <button id="scatter">Scatter</button> <button id="pie">Pie</button>
$(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 }] }); chart.name = false; var enableDataLabels = true, enableMarkers = true, color = false; // Toggle names $('#name').click(function () { chart.series[0].update({ name: chart.name ? null : 'First' }); chart.name = !chart.name; }); // Toggle data labels $('#data-labels').click(function () { chart.series[0].update({ dataLabels: { enabled: enableDataLabels } }); enableDataLabels = !enableDataLabels; }); // Toggle point markers $('#markers').click(function () { chart.series[0].update({ marker: { enabled: enableMarkers } }); enableMarkers = !enableMarkers; }); // Toggle point markers $('#color').click(function () { chart.series[0].update({ color: color ? null : Highcharts.getOptions().colors[1] }); color = !color; }); // Set type $.each(['line', 'column', 'spline', 'area', 'areaspline', 'scatter', 'pie'], function (i, type) { $('#' + type).click(function () { chart.series[0].update({ type: type }); }); }); });
■ chart.series[0].update() 함수로 type, color등 차트의 모양을 변경할 수 있다.
- 자바스크립트 숫자에 천단위 추가 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일