highChart »ç¿ë±â
ÇÏÀÌÂ÷Æ® ½áº¸±â
ÃÖ±Ù¿¡ Â÷Æ® ¾µÀÏÀÌ ¾ø´Âµ¥
highchart°°Àº °æ¿ì´Â »çÀÌÆ®°¡¸é »ç¿ëÇϱ⵵ ÆíÇÏ°Ô µÇ¾î ÀÖ°í ¿É¼ÇÀ» Àû¿ëÇϱâ·Î ÆíÇÏ°Ô µÇ¾îÀÖ´Ù. º¸ÅëÀº docÀ» º¸±â°¡ ¾î·Æ°í ÇÒ¸¸µµ Çѵ¥ Âü ¾Ë¾Æº¸±â ½±°Ô ¼³¸íÇسö¼ Àû¿ëÇϱ⠽¬¿ü´Ù.
±×·±µ¥ óÀ½¿¡ JSONObject¶û Array ·Î ¸¸µç JSONStringÀÌ ¾È¸ÔÇô¼ ²Ï³ª ¾Ö¸Ô¾úÁö¸¸ ¾î¶µç
¿©±â¼ È®ÀÎÇÏ¸é µÇ°í ¶óÀ̺귯¸®µµ ¿©±â¼ ¹Þ¾Æ¼ ¾Æ·¡¿Í °°ÀÌ ¾²¸é µÊ..
¿©±âÀÇ seriesList´Â flexJsonÀ» ÅëÇؼ BeanÀÌ º¯È¯µÈ JSONStringÀ» ´ëÀÔÇؼ ·»´õ¸µÇÑ´Ù.
function hichart(seriesList){
$('#mainChart').highcharts({
chart: {
renderTo: 'container',
backgroundColor: {
linearGradient: { x1: 0, y1: 1, x2: 1, y2: 0 },
stops: [
[0, '#2a2a2b'],
[1, '#3e3e40']
]
},
style: {
fontFamily: "'Unica One', sans-serif"
},
plotBorderColor: null,
plotBorderWidth: null,
plotShadow: false
},
1. Â÷Æ®¿¡ ±×·ÁÁö´Â »ö°¥À» ÁöÁ¤ÇÑ´Ù.
colors: ["#024f55", "#ff3301"],
title: {
style: {
'font-weight': "bold",
color: '#E0E0E3',
textTransform: 'uppercase',
fontSize: '20px',
},
text: "<³»¿Ü±¹ÀÎ Áý°è>",
x: -20 //center
},
2. Â÷Æ®¿¡ ¸¶¿ì½º ¿À¹öÇßÀ»¶§ Ç¥½ÃµÇ´Â µ¥ÀÌÅÍ
tooltip: {
backgroundColor: 'rgba(0, 0, 0, 0.85)',
style: {
color: '#F0F0F0'
},
pointFormat:
'{series.name}: <b>{point.percentage:.1f}%</b><br>{point.y} ¸í'
},
3. ŸÀÌƲ ¿Ü¿¡ ºÎÁ¦¸ñÀ» ¼³Á¤ÇÒ ¼ö Àִµ¥ ÇÊÀÚ´Â ´Ù¸¥ ¸ñÀûÀ¸·Î »ç¿ëÇÏ¿´´Ù. À§Ä¡ À̵¿ÀÌ °¡´ÉÇÏ°í Â÷Æ® ¹Ú½º ³»ºÎÀÇ ¾î´À°÷¿¡ À§Ä¡½ÃÄÑ È°¿ëÇÒ ¼ö ÀÖ´Ù.
subtitle: {
text: '<span id="dmgAmnt"></span>',
floating: false,
align: 'left',
verticalAlign: 'bottom',
x:20,
y:-35,
useHTML: true,
style: {
fontSize: '15px',
color: '#FF00FF',
fontWeight: 'bold'
}
},
4. ¹ü·ÊÀε¥ enabled¸¦ »ç¿ëÇؼ º¸ÀÌ°í ¼û±æ ¼ö ÀÖÀ½.
legend: {
enabled: true,
itemStyle : {
fontSize: '15px',
color: '#E0E0E3'
},
itemHoverStyle: {
color: '#FFF'
},
itemHiddenStyle: {
color: '#606063'
}
},
5. Â÷Æ®À§¿¡ ±âº»ÀûÀ¸·Î º¸¿©Áö´Â µ¥ÀÌÅ͸¦ ¼³Á¤ÇÑ´Ù. distance¸¦ »ç¿ëÇؼ À§Ä¡¸¦ ¼³Á¤ÇÒ ¼ö ÀÖ°í enabled¸¦ »ç¿ëÇؼ ¼û±â±â º¸¿©Áö±â¸¦ ¼³Á¤°¡´ÉÇÏ´Ù.
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: dataLabel,
format: '{point.percentage:.1f}%<br>{point.y} ¸í',
style : {
fontSize: '15px',
color: "white",
textShadow: "0px 1px 2px black",
fontWeight: "bold"
},
"distance": -50
},
6. Â÷Æ®¸¦ Ŭ¸¯½Ã¿¡ ¹ß»ýÇÒ À̺¥Æ®¸¦ ¼³Á¤°¡´ÉÇÏ´Ù. ã¾Æº¸¸é ¿©·¯°¡Áö ¿É¼ÇÀÌ ÀÖ´Ù.
events: {
click: function (event) {
$.bindFunctionCall(updatePsDmgByClick, event.point.name);
updatePsDmgByClick(event.point.name);
}
},
borderWidth: 1,
borderColor: "#505050",
showInLegend: true
}
},
7.Â÷Æ®¿¡ ±×·ÁÁú µ¥ÀÌÅ͸¦ ´ëÀÔÇÏ´Â À§Ä¡
series: seriesList,
navigation: {
buttonOptions: {
symbolStroke: '#DDDDDD',
theme: {
fill: '#505053'
}
}
},
navigator: {
handles: {
backgroundColor: '#666',
borderColor: '#AAA'
},
outlineColor: '#CCC',
maskFill: 'rgba(255,255,255,0.1)',
series: {
color: '#7798BF',
lineColor: '#A6C7ED'
},
xAxis: {
gridLineColor: '#505053'
}
},
});
}