1. Highcharts 를 Github blog에 Embedding 하는 방법
일단, Highcharts 뿐만 아니라 다른 html 문법으로 작성한 페이지를 같은 방법으로 적용할 수 있습니다.
아래 html 코드를 Github blog 폴더 안에 _includes 폴더 에 원한는파일이름.html 로 저장합니다.
../_includes/highcharts.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<html lang="en">
<head>
<meta charset="utf-8" />
<link href="https://www.highcharts.com/highslide/highslide.css" rel="stylesheet" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/6/highcharts.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/6/highcharts-more.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/6/modules/heatmap.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/6/modules/exporting.js"></script>
</head>
<body style="margin:0;padding:0">
<div id="container" style="">Loading....</div>
<script>
$(function(){
Highcharts.setOptions({"global": {}, "lang": {}});
var option = {"chart": {"renderTo": "container", "resetZoomButton": {"relativeTo": "chart", "position": {"x": 10, "y": -30}}, "style": {"fontFamily": "Lucida Grande, sans-serif", "fontfontSize": "22px"}}, "colors": {}, "credits": {"enabled": false}, "drilldown": {}, "exporting": {}, "labels": {}, "legend": {}, "loading": {}, "navigation": {}, "pane": {}, "plotOptions": {}, "series": {}, "subtitle": {}, "title": {"text": "A New Highchart"}, "tooltip": {"formatter": function () { return'<b>'+ this.series.name + '</b>: ' + this.y; }}, "xAxis": {"events": {"afterBreaks": function(e){return}, "pointBreak": function(e){return}}, "plotBands": [{"color": "#FCFFC5", "from": 2, "to": 4}, {"color": "#FCFFC5", "from": 6, "to": 8}, {"color": "#FCFFC5", "from": 10, "to": 12}]}, "yAxis": {}};
var chart = new Highcharts.Chart(option);
var data = [{"data": [20, 19, 18, 17, 16, 15, 14, 13, 12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2], "type": "line", "name": "Series 1"}, {"data": [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19], "type": "line", "marker": {"states": {"hover": {"enabled": true, "fillColor": "white", "lineColor": "red", "lineWidth": 2}}}, "events": {"click": function (event) { alert(this.name + ' clicked\n' + 'Alt: ' + event.altKey + '\n' + 'Control: ' + event.ctrlKey + '\n' + 'Shift: ' + event.shiftKey + '\n');}}, "name": "Series 2", "dashStyle": "ShortDash"}];
var dataLen = data.length;
for (var ix = 0; ix < dataLen; ix++) {
chart.addSeries(data[ix]);
}
});
</script>
</body>
</html>
2. include html
아래와 같이 아까 저장했던 파일을 작성할 포스트의 markdown 에 그냥 넣기만하면 알아서 html 파일을 보여줍니다.
1
{% include highcharts.html %}
Highchart
Loading....