Highcharts update event

■ 참조(복사해서 붙여넣었어요!ㅠ)

■ 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등 차트의 모양을 변경할 수 있다.