조민지 / 2018_2_project

Go to a project
Toggle navigation Toggle navigation pinning
배희수
66a5e1af 2 parents b733ef5c 7e1cbd3e

Merge branch 'developing' into 'algorithm' 

# Conflicts:
#   package-lock.json
Inline Side-by-side
Showing 11 changed files with 2241 additions and 161 deletions
This diff could not be displayed because it is too large.
......@@ -6,24 +6,588 @@
License: www.highcharts.com/license
*/
(function(g){"object"===typeof module&&module.exports?module.exports=g:"function"===typeof define&&define.amd?define(function(){return g}):g(Highcharts)})(function(g){(function(f){var g=f.defaultOptions,y=f.doc,z=f.Chart,q=f.addEvent,H=f.removeEvent,B=f.fireEvent,r=f.createElement,C=f.discardElement,u=f.css,p=f.merge,A=f.pick,l=f.each,E=f.objectEach,t=f.extend,I=f.isTouchDevice,D=f.win,F=D.navigator.userAgent,J=f.Renderer.prototype.symbols;/Edge\/|Trident\/|MSIE /.test(F);/firefox/i.test(F);t(g.lang,
{printChart:"Print chart",downloadPNG:"Download PNG image",downloadJPEG:"Download JPEG image",downloadPDF:"Download PDF document",downloadSVG:"Download SVG vector image",contextButtonTitle:"Chart context menu"});g.navigation={buttonOptions:{theme:{},symbolSize:14,symbolX:12.5,symbolY:10.5,align:"right",buttonSpacing:3,height:22,verticalAlign:"top",width:24}};p(!0,g.navigation,{menuStyle:{border:"1px solid #999999",background:"#ffffff",padding:"5px 0"},menuItemStyle:{padding:"0.5em 1em",background:"none",
color:"#333333",fontSize:I?"14px":"11px",transition:"background 250ms, color 250ms"},menuItemHoverStyle:{background:"#335cad",color:"#ffffff"},buttonOptions:{symbolFill:"#666666",symbolStroke:"#666666",symbolStrokeWidth:3,theme:{fill:"#ffffff",stroke:"none",padding:5}}});g.exporting={type:"image/png",url:"https://export.highcharts.com/",printMaxWidth:780,scale:2,buttons:{contextButton:{className:"highcharts-contextbutton",menuClassName:"highcharts-contextmenu",symbol:"menu",titleKey:"contextButtonTitle",
menuItems:"printChart separator downloadPNG downloadJPEG downloadPDF downloadSVG".split(" ")}},menuItemDefinitions:{printChart:{textKey:"printChart",onclick:function(){this.print()}},separator:{separator:!0},downloadPNG:{textKey:"downloadPNG",onclick:function(){this.exportChart()}},downloadJPEG:{textKey:"downloadJPEG",onclick:function(){this.exportChart({type:"image/jpeg"})}},downloadPDF:{textKey:"downloadPDF",onclick:function(){this.exportChart({type:"application/pdf"})}},downloadSVG:{textKey:"downloadSVG",
onclick:function(){this.exportChart({type:"image/svg+xml"})}}}};f.post=function(a,b,e){var c=r("form",p({method:"post",action:a,enctype:"multipart/form-data"},e),{display:"none"},y.body);E(b,function(a,b){r("input",{type:"hidden",name:b,value:a},null,c)});c.submit();C(c)};t(z.prototype,{sanitizeSVG:function(a,b){if(b&&b.exporting&&b.exporting.allowHTML){var e=a.match(/<\/svg>(.*?$)/);e&&e[1]&&(e='\x3cforeignObject x\x3d"0" y\x3d"0" width\x3d"'+b.chart.width+'" height\x3d"'+b.chart.height+'"\x3e\x3cbody xmlns\x3d"http://www.w3.org/1999/xhtml"\x3e'+
e[1]+"\x3c/body\x3e\x3c/foreignObject\x3e",a=a.replace("\x3c/svg\x3e",e+"\x3c/svg\x3e"))}a=a.replace(/zIndex="[^"]+"/g,"").replace(/symbolName="[^"]+"/g,"").replace(/jQuery[0-9]+="[^"]+"/g,"").replace(/url\(("|&quot;)(\S+)("|&quot;)\)/g,"url($2)").replace(/url\([^#]+#/g,"url(#").replace(/<svg /,'\x3csvg xmlns:xlink\x3d"http://www.w3.org/1999/xlink" ').replace(/ (|NS[0-9]+\:)href=/g," xlink:href\x3d").replace(/\n/," ").replace(/<\/svg>.*?$/,"\x3c/svg\x3e").replace(/(fill|stroke)="rgba\(([ 0-9]+,[ 0-9]+,[ 0-9]+),([ 0-9\.]+)\)"/g,
'$1\x3d"rgb($2)" $1-opacity\x3d"$3"').replace(/&nbsp;/g,"\u00a0").replace(/&shy;/g,"\u00ad");this.ieSanitizeSVG&&(a=this.ieSanitizeSVG(a));return a},getChartHTML:function(){return this.container.innerHTML},getSVG:function(a){var b,e,c,v,m,h=p(this.options,a);e=r("div",null,{position:"absolute",top:"-9999em",width:this.chartWidth+"px",height:this.chartHeight+"px"},y.body);c=this.renderTo.style.width;m=this.renderTo.style.height;c=h.exporting.sourceWidth||h.chart.width||/px$/.test(c)&&parseInt(c,10)||
600;m=h.exporting.sourceHeight||h.chart.height||/px$/.test(m)&&parseInt(m,10)||400;t(h.chart,{animation:!1,renderTo:e,forExport:!0,renderer:"SVGRenderer",width:c,height:m});h.exporting.enabled=!1;delete h.data;h.series=[];l(this.series,function(a){v=p(a.userOptions,{animation:!1,enableMouseTracking:!1,showCheckbox:!1,visible:a.visible});v.isInternal||h.series.push(v)});l(this.axes,function(a){a.userOptions.internalKey||(a.userOptions.internalKey=f.uniqueKey())});b=new f.Chart(h,this.callback);a&&
l(["xAxis","yAxis","series"],function(c){var d={};a[c]&&(d[c]=a[c],b.update(d))});l(this.axes,function(a){var c=f.find(b.axes,function(b){return b.options.internalKey===a.userOptions.internalKey}),d=a.getExtremes(),e=d.userMin,d=d.userMax;c&&(void 0!==e&&e!==c.min||void 0!==d&&d!==c.max)&&c.setExtremes(e,d,!0,!1)});c=b.getChartHTML();B(this,"getSVG",{chartCopy:b});c=this.sanitizeSVG(c,h);h=null;b.destroy();C(e);return c},getSVGForExport:function(a,b){var e=this.options.exporting;return this.getSVG(p({chart:{borderRadius:0}},
e.chartOptions,b,{exporting:{sourceWidth:a&&a.sourceWidth||e.sourceWidth,sourceHeight:a&&a.sourceHeight||e.sourceHeight}}))},exportChart:function(a,b){b=this.getSVGForExport(a,b);a=p(this.options.exporting,a);f.post(a.url,{filename:a.filename||"chart",type:a.type,width:a.width||0,scale:a.scale,svg:b},a.formAttributes)},print:function(){var a=this,b=a.container,e=[],c=b.parentNode,f=y.body,m=f.childNodes,h=a.options.exporting.printMaxWidth,d,n;if(!a.isPrinting){a.isPrinting=!0;a.pointer.reset(null,
0);B(a,"beforePrint");if(n=h&&a.chartWidth>h)d=[a.options.chart.width,void 0,!1],a.setSize(h,void 0,!1);l(m,function(a,b){1===a.nodeType&&(e[b]=a.style.display,a.style.display="none")});f.appendChild(b);setTimeout(function(){D.focus();D.print();setTimeout(function(){c.appendChild(b);l(m,function(a,b){1===a.nodeType&&(a.style.display=e[b])});a.isPrinting=!1;n&&a.setSize.apply(a,d);B(a,"afterPrint")},1E3)},1)}},contextMenu:function(a,b,e,c,v,m,h){var d=this,n=d.options.navigation,g=d.chartWidth,G=d.chartHeight,
p="cache-"+a,k=d[p],w=Math.max(v,m),x;k||(d.exportContextMenu=d[p]=k=r("div",{className:a},{position:"absolute",zIndex:1E3,padding:w+"px",pointerEvents:"auto"},d.fixedDiv||d.container),x=r("div",{className:"highcharts-menu"},null,k),u(x,t({MozBoxShadow:"3px 3px 10px #888",WebkitBoxShadow:"3px 3px 10px #888",boxShadow:"3px 3px 10px #888"},n.menuStyle)),k.hideMenu=function(){u(k,{display:"none"});h&&h.setState(0);d.openMenu=!1;f.clearTimeout(k.hideTimer)},d.exportEvents.push(q(k,"mouseleave",function(){k.hideTimer=
setTimeout(k.hideMenu,500)}),q(k,"mouseenter",function(){f.clearTimeout(k.hideTimer)}),q(y,"mouseup",function(b){d.pointer.inClass(b.target,a)||k.hideMenu()}),q(k,"click",function(){d.openMenu&&k.hideMenu()})),l(b,function(a){"string"===typeof a&&(a=d.options.exporting.menuItemDefinitions[a]);if(f.isObject(a,!0)){var b;a.separator?b=r("hr",null,null,x):(b=r("div",{className:"highcharts-menu-item",onclick:function(b){b&&b.stopPropagation();k.hideMenu();a.onclick&&a.onclick.apply(d,arguments)},innerHTML:a.text||
d.options.lang[a.textKey]},null,x),b.onmouseover=function(){u(this,n.menuItemHoverStyle)},b.onmouseout=function(){u(this,n.menuItemStyle)},u(b,t({cursor:"pointer"},n.menuItemStyle)));d.exportDivElements.push(b)}}),d.exportDivElements.push(x,k),d.exportMenuWidth=k.offsetWidth,d.exportMenuHeight=k.offsetHeight);b={display:"block"};e+d.exportMenuWidth>g?b.right=g-e-v-w+"px":b.left=e-w+"px";c+m+d.exportMenuHeight>G&&"top"!==h.alignOptions.verticalAlign?b.bottom=G-c-w+"px":b.top=c+m-w+"px";u(k,b);d.openMenu=
!0},addButton:function(a){var b=this,e=b.renderer,c=p(b.options.navigation.buttonOptions,a),f=c.onclick,m=c.menuItems,h,d,n=c.symbolSize||12;b.btnCount||(b.btnCount=0);b.exportDivElements||(b.exportDivElements=[],b.exportSVGElements=[]);if(!1!==c.enabled){var g=c.theme,l=g.states,q=l&&l.hover,l=l&&l.select,k;delete g.states;f?k=function(a){a&&a.stopPropagation();f.call(b,a)}:m&&(k=function(a){a&&a.stopPropagation();b.contextMenu(d.menuClassName,m,d.translateX,d.translateY,d.width,d.height,d);d.setState(2)});
c.text&&c.symbol?g.paddingLeft=A(g.paddingLeft,25):c.text||t(g,{width:c.width,height:c.height,padding:0});d=e.button(c.text,0,0,k,g,q,l).addClass(a.className).attr({"stroke-linecap":"round",title:A(b.options.lang[c._titleKey||c.titleKey],"")});d.menuClassName=a.menuClassName||"highcharts-menu-"+b.btnCount++;c.symbol&&(h=e.symbol(c.symbol,c.symbolX-n/2,c.symbolY-n/2,n,n,{width:n,height:n}).addClass("highcharts-button-symbol").attr({zIndex:1}).add(d),h.attr({stroke:c.symbolStroke,fill:c.symbolFill,
"stroke-width":c.symbolStrokeWidth||1}));d.add(b.exportingGroup).align(t(c,{width:d.width,x:A(c.x,b.buttonOffset)}),!0,"spacingBox");b.buttonOffset+=(d.width+c.buttonSpacing)*("right"===c.align?-1:1);b.exportSVGElements.push(d,h)}},destroyExport:function(a){var b=a?a.target:this;a=b.exportSVGElements;var e=b.exportDivElements,c=b.exportEvents,g;a&&(l(a,function(a,c){a&&(a.onclick=a.ontouchstart=null,g="cache-"+a.menuClassName,b[g]&&delete b[g],b.exportSVGElements[c]=a.destroy())}),a.length=0);b.exportingGroup&&
(b.exportingGroup.destroy(),delete b.exportingGroup);e&&(l(e,function(a,c){f.clearTimeout(a.hideTimer);H(a,"mouseleave");b.exportDivElements[c]=a.onmouseout=a.onmouseover=a.ontouchstart=a.onclick=null;C(a)}),e.length=0);c&&(l(c,function(a){a()}),c.length=0)}});J.menu=function(a,b,e,c){return["M",a,b+2.5,"L",a+e,b+2.5,"M",a,b+c/2+.5,"L",a+e,b+c/2+.5,"M",a,b+c-1.5,"L",a+e,b+c-1.5]};z.prototype.renderExporting=function(){var a=this,b=a.options.exporting,e=b.buttons,c=a.isDirtyExporting||!a.exportSVGElements;
a.buttonOffset=0;a.isDirtyExporting&&a.destroyExport();c&&!1!==b.enabled&&(a.exportEvents=[],a.exportingGroup=a.exportingGroup||a.renderer.g("exporting-group").attr({zIndex:3}).add(),E(e,function(b){a.addButton(b)}),a.isDirtyExporting=!1);q(a,"destroy",a.destroyExport)};q(z,"init",function(){var a=this;l(["exporting","navigation"],function(b){a[b]={update:function(e,c){a.isDirtyExporting=!0;p(!0,a.options[b],e);A(c,!0)&&a.redraw()}}})});z.prototype.callbacks.push(function(a){a.renderExporting();q(a,
"redraw",a.renderExporting)})})(g)});
(function(g) {
"object" === typeof module && module.exports
? (module.exports = g)
: "function" === typeof define && define.amd
? define(function() {
return g;
})
: g(Highcharts);
})(function(g) {
(function(f) {
var g = f.defaultOptions,
y = f.doc,
z = f.Chart,
q = f.addEvent,
H = f.removeEvent,
B = f.fireEvent,
r = f.createElement,
C = f.discardElement,
u = f.css,
p = f.merge,
A = f.pick,
l = f.each,
E = f.objectEach,
t = f.extend,
I = f.isTouchDevice,
D = f.win,
F = D.navigator.userAgent,
J = f.Renderer.prototype.symbols;
/Edge\/|Trident\/|MSIE /.test(F);
/firefox/i.test(F);
t(g.lang, {
printChart: "Print chart",
downloadPNG: "Download PNG image",
downloadJPEG: "Download JPEG image",
downloadPDF: "Download PDF document",
downloadSVG: "Download SVG vector image",
contextButtonTitle: "Chart context menu"
});
g.navigation = {
buttonOptions: {
theme: {},
symbolSize: 14,
symbolX: 12.5,
symbolY: 10.5,
align: "right",
buttonSpacing: 3,
height: 22,
verticalAlign: "top",
width: 24
}
};
p(!0, g.navigation, {
menuStyle: {
border: "1px solid #999999",
background: "#ffffff",
padding: "5px 0"
},
menuItemStyle: {
padding: "0.5em 1em",
background: "none",
color: "#333333",
fontSize: I ? "14px" : "11px",
transition: "background 250ms, color 250ms"
},
menuItemHoverStyle: { background: "#335cad", color: "#ffffff" },
buttonOptions: {
symbolFill: "#666666",
symbolStroke: "#666666",
symbolStrokeWidth: 3,
theme: { fill: "#ffffff", stroke: "none", padding: 5 }
}
});
g.exporting = {
type: "image/png",
url: "https://export.highcharts.com/",
printMaxWidth: 780,
scale: 2,
buttons: {
contextButton: {
className: "highcharts-contextbutton",
menuClassName: "highcharts-contextmenu",
symbol: "menu",
titleKey: "contextButtonTitle",
menuItems: "printChart separator downloadPNG downloadJPEG downloadPDF downloadSVG".split(
" "
)
}
},
menuItemDefinitions: {
printChart: {
textKey: "printChart",
onclick: function() {
this.print();
}
},
separator: { separator: !0 },
downloadPNG: {
textKey: "downloadPNG",
onclick: function() {
this.exportChart();
}
},
downloadJPEG: {
textKey: "downloadJPEG",
onclick: function() {
this.exportChart({ type: "image/jpeg" });
}
},
downloadPDF: {
textKey: "downloadPDF",
onclick: function() {
this.exportChart({ type: "application/pdf" });
}
},
downloadSVG: {
textKey: "downloadSVG",
onclick: function() {
this.exportChart({ type: "image/svg+xml" });
}
}
}
};
f.post = function(a, b, e) {
var c = r(
"form",
p({ method: "post", action: a, enctype: "multipart/form-data" }, e),
{ display: "none" },
y.body
);
E(b, function(a, b) {
r("input", { type: "hidden", name: b, value: a }, null, c);
});
c.submit();
C(c);
};
t(z.prototype, {
sanitizeSVG: function(a, b) {
if (b && b.exporting && b.exporting.allowHTML) {
var e = a.match(/<\/svg>(.*?$)/);
e &&
e[1] &&
((e =
'\x3cforeignObject x\x3d"0" y\x3d"0" width\x3d"' +
b.chart.width +
'" height\x3d"' +
b.chart.height +
'"\x3e\x3cbody xmlns\x3d"http://www.w3.org/1999/xhtml"\x3e' +
e[1] +
"\x3c/body\x3e\x3c/foreignObject\x3e"),
(a = a.replace("\x3c/svg\x3e", e + "\x3c/svg\x3e")));
}
a = a
.replace(/zIndex="[^"]+"/g, "")
.replace(/symbolName="[^"]+"/g, "")
.replace(/jQuery[0-9]+="[^"]+"/g, "")
.replace(/url\(("|&quot;)(\S+)("|&quot;)\)/g, "url($2)")
.replace(/url\([^#]+#/g, "url(#")
.replace(
/<svg /,
'\x3csvg xmlns:xlink\x3d"http://www.w3.org/1999/xlink" '
)
.replace(/ (|NS[0-9]+\:)href=/g, " xlink:href\x3d")
.replace(/\n/, " ")
.replace(/<\/svg>.*?$/, "\x3c/svg\x3e")
.replace(
/(fill|stroke)="rgba\(([ 0-9]+,[ 0-9]+,[ 0-9]+),([ 0-9\.]+)\)"/g,
'$1\x3d"rgb($2)" $1-opacity\x3d"$3"'
)
.replace(/&nbsp;/g, "\u00a0")
.replace(/&shy;/g, "\u00ad");
this.ieSanitizeSVG && (a = this.ieSanitizeSVG(a));
return a;
},
getChartHTML: function() {
return this.container.innerHTML;
},
getSVG: function(a) {
var b,
e,
c,
v,
m,
h = p(this.options, a);
e = r(
"div",
null,
{
position: "absolute",
top: "-9999em",
width: this.chartWidth + "px",
height: this.chartHeight + "px"
},
y.body
);
c = this.renderTo.style.width;
m = this.renderTo.style.height;
c =
h.exporting.sourceWidth ||
h.chart.width ||
(/px$/.test(c) && parseInt(c, 10)) ||
600;
m =
h.exporting.sourceHeight ||
h.chart.height ||
(/px$/.test(m) && parseInt(m, 10)) ||
400;
t(h.chart, {
animation: !1,
renderTo: e,
forExport: !0,
renderer: "SVGRenderer",
width: c,
height: m
});
h.exporting.enabled = !1;
delete h.data;
h.series = [];
l(this.series, function(a) {
v = p(a.userOptions, {
animation: !1,
enableMouseTracking: !1,
showCheckbox: !1,
visible: a.visible
});
v.isInternal || h.series.push(v);
});
l(this.axes, function(a) {
a.userOptions.internalKey ||
(a.userOptions.internalKey = f.uniqueKey());
});
b = new f.Chart(h, this.callback);
a &&
l(["xAxis", "yAxis", "series"], function(c) {
var d = {};
a[c] && ((d[c] = a[c]), b.update(d));
});
l(this.axes, function(a) {
var c = f.find(b.axes, function(b) {
return b.options.internalKey === a.userOptions.internalKey;
}),
d = a.getExtremes(),
e = d.userMin,
d = d.userMax;
c &&
((void 0 !== e && e !== c.min) || (void 0 !== d && d !== c.max)) &&
c.setExtremes(e, d, !0, !1);
});
c = b.getChartHTML();
B(this, "getSVG", { chartCopy: b });
c = this.sanitizeSVG(c, h);
h = null;
b.destroy();
C(e);
return c;
},
getSVGForExport: function(a, b) {
var e = this.options.exporting;
return this.getSVG(
p({ chart: { borderRadius: 0 } }, e.chartOptions, b, {
exporting: {
sourceWidth: (a && a.sourceWidth) || e.sourceWidth,
sourceHeight: (a && a.sourceHeight) || e.sourceHeight
}
})
);
},
exportChart: function(a, b) {
b = this.getSVGForExport(a, b);
a = p(this.options.exporting, a);
f.post(
a.url,
{
filename: a.filename || "chart",
type: a.type,
width: a.width || 0,
scale: a.scale,
svg: b
},
a.formAttributes
);
},
print: function() {
var a = this,
b = a.container,
e = [],
c = b.parentNode,
f = y.body,
m = f.childNodes,
h = a.options.exporting.printMaxWidth,
d,
n;
if (!a.isPrinting) {
a.isPrinting = !0;
a.pointer.reset(null, 0);
B(a, "beforePrint");
if ((n = h && a.chartWidth > h))
(d = [a.options.chart.width, void 0, !1]), a.setSize(h, void 0, !1);
l(m, function(a, b) {
1 === a.nodeType &&
((e[b] = a.style.display), (a.style.display = "none"));
});
f.appendChild(b);
setTimeout(function() {
D.focus();
D.print();
setTimeout(function() {
c.appendChild(b);
l(m, function(a, b) {
1 === a.nodeType && (a.style.display = e[b]);
});
a.isPrinting = !1;
n && a.setSize.apply(a, d);
B(a, "afterPrint");
}, 1e3);
}, 1);
}
},
contextMenu: function(a, b, e, c, v, m, h) {
var d = this,
n = d.options.navigation,
g = d.chartWidth,
G = d.chartHeight,
p = "cache-" + a,
k = d[p],
w = Math.max(v, m),
x;
k ||
((d.exportContextMenu = d[p] = k = r(
"div",
{ className: a },
{
position: "absolute",
zIndex: 1e3,
padding: w + "px",
pointerEvents: "auto"
},
d.fixedDiv || d.container
)),
(x = r("div", { className: "highcharts-menu" }, null, k)),
u(
x,
t(
{
MozBoxShadow: "3px 3px 10px #888",
WebkitBoxShadow: "3px 3px 10px #888",
boxShadow: "3px 3px 10px #888"
},
n.menuStyle
)
),
(k.hideMenu = function() {
u(k, { display: "none" });
h && h.setState(0);
d.openMenu = !1;
f.clearTimeout(k.hideTimer);
}),
d.exportEvents.push(
q(k, "mouseleave", function() {
k.hideTimer = setTimeout(k.hideMenu, 500);
}),
q(k, "mouseenter", function() {
f.clearTimeout(k.hideTimer);
}),
q(y, "mouseup", function(b) {
d.pointer.inClass(b.target, a) || k.hideMenu();
}),
q(k, "click", function() {
d.openMenu && k.hideMenu();
})
),
l(b, function(a) {
"string" === typeof a &&
(a = d.options.exporting.menuItemDefinitions[a]);
if (f.isObject(a, !0)) {
var b;
a.separator
? (b = r("hr", null, null, x))
: ((b = r(
"div",
{
className: "highcharts-menu-item",
onclick: function(b) {
b && b.stopPropagation();
k.hideMenu();
a.onclick && a.onclick.apply(d, arguments);
},
innerHTML: a.text || d.options.lang[a.textKey]
},
null,
x
)),
(b.onmouseover = function() {
u(this, n.menuItemHoverStyle);
}),
(b.onmouseout = function() {
u(this, n.menuItemStyle);
}),
u(b, t({ cursor: "pointer" }, n.menuItemStyle)));
d.exportDivElements.push(b);
}
}),
d.exportDivElements.push(x, k),
(d.exportMenuWidth = k.offsetWidth),
(d.exportMenuHeight = k.offsetHeight));
b = { display: "block" };
e + d.exportMenuWidth > g
? (b.right = g - e - v - w + "px")
: (b.left = e - w + "px");
c + m + d.exportMenuHeight > G && "top" !== h.alignOptions.verticalAlign
? (b.bottom = G - c - w + "px")
: (b.top = c + m - w + "px");
u(k, b);
d.openMenu = !0;
},
addButton: function(a) {
var b = this,
e = b.renderer,
c = p(b.options.navigation.buttonOptions, a),
f = c.onclick,
m = c.menuItems,
h,
d,
n = c.symbolSize || 12;
b.btnCount || (b.btnCount = 0);
b.exportDivElements ||
((b.exportDivElements = []), (b.exportSVGElements = []));
if (!1 !== c.enabled) {
var g = c.theme,
l = g.states,
q = l && l.hover,
l = l && l.select,
k;
delete g.states;
f
? (k = function(a) {
a && a.stopPropagation();
f.call(b, a);
})
: m &&
(k = function(a) {
a && a.stopPropagation();
b.contextMenu(
d.menuClassName,
m,
d.translateX,
d.translateY,
d.width,
d.height,
d
);
d.setState(2);
});
c.text && c.symbol
? (g.paddingLeft = A(g.paddingLeft, 25))
: c.text || t(g, { width: c.width, height: c.height, padding: 0 });
d = e
.button(c.text, 0, 0, k, g, q, l)
.addClass(a.className)
.attr({
"stroke-linecap": "round",
title: A(b.options.lang[c._titleKey || c.titleKey], "")
});
d.menuClassName =
a.menuClassName || "highcharts-menu-" + b.btnCount++;
c.symbol &&
((h = e
.symbol(c.symbol, c.symbolX - n / 2, c.symbolY - n / 2, n, n, {
width: n,
height: n
})
.addClass("highcharts-button-symbol")
.attr({ zIndex: 1 })
.add(d)),
h.attr({
stroke: c.symbolStroke,
fill: c.symbolFill,
"stroke-width": c.symbolStrokeWidth || 1
}));
d.add(b.exportingGroup).align(
t(c, { width: d.width, x: A(c.x, b.buttonOffset) }),
!0,
"spacingBox"
);
b.buttonOffset +=
(d.width + c.buttonSpacing) * ("right" === c.align ? -1 : 1);
b.exportSVGElements.push(d, h);
}
},
destroyExport: function(a) {
var b = a ? a.target : this;
a = b.exportSVGElements;
var e = b.exportDivElements,
c = b.exportEvents,
g;
a &&
(l(a, function(a, c) {
a &&
((a.onclick = a.ontouchstart = null),
(g = "cache-" + a.menuClassName),
b[g] && delete b[g],
(b.exportSVGElements[c] = a.destroy()));
}),
(a.length = 0));
b.exportingGroup &&
(b.exportingGroup.destroy(), delete b.exportingGroup);
e &&
(l(e, function(a, c) {
f.clearTimeout(a.hideTimer);
H(a, "mouseleave");
b.exportDivElements[
c
] = a.onmouseout = a.onmouseover = a.ontouchstart = a.onclick = null;
C(a);
}),
(e.length = 0));
c &&
(l(c, function(a) {
a();
}),
(c.length = 0));
}
});
J.menu = function(a, b, e, c) {
return [
"M",
a,
b + 2.5,
"L",
a + e,
b + 2.5,
"M",
a,
b + c / 2 + 0.5,
"L",
a + e,
b + c / 2 + 0.5,
"M",
a,
b + c - 1.5,
"L",
a + e,
b + c - 1.5
];
};
z.prototype.renderExporting = function() {
var a = this,
b = a.options.exporting,
e = b.buttons,
c = a.isDirtyExporting || !a.exportSVGElements;
a.buttonOffset = 0;
a.isDirtyExporting && a.destroyExport();
c &&
!1 !== b.enabled &&
((a.exportEvents = []),
(a.exportingGroup =
a.exportingGroup ||
a.renderer
.g("exporting-group")
.attr({ zIndex: 3 })
.add()),
E(e, function(b) {
a.addButton(b);
}),
(a.isDirtyExporting = !1));
q(a, "destroy", a.destroyExport);
};
q(z, "init", function() {
var a = this;
l(["exporting", "navigation"], function(b) {
a[b] = {
update: function(e, c) {
a.isDirtyExporting = !0;
p(!0, a.options[b], e);
A(c, !0) && a.redraw();
}
};
});
});
z.prototype.callbacks.push(function(a) {
a.renderExporting();
q(a, "redraw", a.renderExporting);
});
})(g);
});
//# sourceMappingURL=exporting.js.map
......
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Highcharts Example</title>
<style type="text/css"></style>
</head>
<body>
<script src="../../code/highcharts.js"></script>
<script src="../../code/modules/exporting.js"></script>
<script src="../../code/modules/export-data.js"></script>
<div
id="container1"
style="width:1260px; height: 400px; margin: 0 auto"
></div>
<div style="width:1275px; margin:0 auto;">
<div style="display: inline-block;">
<div
id="container2"
style="width:400px; height: 300px; padding:0; margin-left:0px;margin-right: 30px;"
></div>
</div>
<div style="display: inline-block;">
<div
id="container3"
style="width:400px; height: 300px; padding:0; margin-left:0px;margin-right: 30px;"
></div>
</div>
<div style="display: inline-block;">
<div
id="container4"
style="width:400px; height: 300px; padding:0; margin-left:0px;"
></div>
</div>
</div>
<script type="text/javascript">
Highcharts.chart("container1", {
chart: {
type: "areaspline",
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function() {
// set up the updating of the chart each second
var series = this.series[0];
setInterval(function() {
var x = new Date().getTime(), // 현재 시간
y = 0.7
series.addPoint([x, y], true, true);
}, 3000); //1000=1초
}
}
},
time: {
useUTC: false
},
title: {
text: "실시간 사망률"
},
xAxis: {
type: "datetime",
tickPixelInterval: 150
},
yAxis: {
title: {
text: "Value"
},
plotLines: [
{
value: 0,
width: 1,
color: "#808080"
}
]
},
tooltip: {
headerFormat: "<b>{series.name}</b><br/>",
pointFormat: "{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}"
},
legend: {
//enabled: false
layout: "vertical",
align: "left",
verticalAlign: "top",
x: 120,
y: 70,
floating: true,
borderWidth: 1,
backgroundColor:
(Highcharts.theme && Highcharts.theme.legendBackgroundColor) ||
"#FFFFFF"
},
exporting: {
enabled: false
},
series: [
{
name: "사망률(%)",
data: (function() {
// generate an array of random data
var data = [],
time = new Date().getTime(),
i;
for (i = -19; i <= 0; i += 1) {
data.push({
x: time + i * 3000,
y: 0
});
}
return data;
})()
}
]
});
Highcharts.chart("container2", {
chart: {
type: "spline",
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function() {
// set up the updating of the chart each second
var series = this.series[0];
setInterval(function() {
var x = new Date().getTime(), // 현재 시간
y = Math.random(); //
series.addPoint([x, y], true, true);
}, 3000); //1000=1초
}
}
},
time: {
useUTC: false
},
title: {
text: "실시간 사망률"
},
xAxis: {
type: "datetime",
tickPixelInterval: 150
},
yAxis: {
title: {
text: "Value"
},
plotLines: [
{
value: 0,
width: 1,
color: "#808080"
}
]
},
tooltip: {
headerFormat: "<b>{series.name}</b><br/>",
pointFormat: "{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}"
},
legend: {
//enabled: false
layout: "vertical",
align: "left",
verticalAlign: "top",
x: 120,
y: 70,
floating: true,
borderWidth: 1,
backgroundColor:
(Highcharts.theme && Highcharts.theme.legendBackgroundColor) ||
"#FFFFFF"
},
exporting: {
enabled: false
},
series: [
{
name: "사망률(%)",
data: (function() {
// generate an array of random data
var data = [],
time = new Date().getTime(),
i;
for (i = -19; i <= 0; i += 1) {
data.push({
x: time + i * 3000,
y: 0
});
}
return data;
})()
}
]
});
Highcharts.chart("container3", {
chart: {
type: "spline",
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function() {
// set up the updating of the chart each second
var series = this.series[0];
setInterval(function() {
var x = new Date().getTime(), // 현재 시간
y = Math.random(); //
series.addPoint([x, y], true, true);
}, 3000); //1000=1초
}
}
},
time: {
useUTC: false
},
title: {
text: "실시간 사망률"
},
xAxis: {
type: "datetime",
tickPixelInterval: 150
},
yAxis: {
title: {
text: "Value"
},
plotLines: [
{
value: 0,
width: 1,
color: "#808080"
}
]
},
tooltip: {
headerFormat: "<b>{series.name}</b><br/>",
pointFormat: "{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}"
},
legend: {
//enabled: false
layout: "vertical",
align: "left",
verticalAlign: "top",
x: 120,
y: 70,
floating: true,
borderWidth: 1,
backgroundColor:
(Highcharts.theme && Highcharts.theme.legendBackgroundColor) ||
"#FFFFFF"
},
exporting: {
enabled: false
},
series: [
{
name: "사망률(%)",
data: (function() {
// generate an array of random data
var data = [],
time = new Date().getTime(),
i;
for (i = -19; i <= 0; i += 1) {
data.push({
x: time + i * 3000,
y: 0
});
}
return data;
})()
}
]
});
Highcharts.chart("container4", {
chart: {
type: "spline",
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function() {
// set up the updating of the chart each second
var series = this.series[0];
setInterval(function() {
var x = new Date().getTime(), // 현재 시간
y = Math.random(); //
series.addPoint([x, y], true, true);
}, 3000); //1000=1초
}
}
},
time: {
useUTC: false
},
title: {
text: "실시간 사망률"
},
xAxis: {
type: "datetime",
tickPixelInterval: 150
},
yAxis: {
title: {
text: "Value"
},
plotLines: [
{
value: 0,
width: 1,
color: "#808080"
}
]
},
tooltip: {
headerFormat: "<b>{series.name}</b><br/>",
pointFormat: "{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}"
},
legend: {
//enabled: false
layout: "vertical",
align: "left",
verticalAlign: "top",
x: 120,
y: 70,
floating: true,
borderWidth: 1,
backgroundColor:
(Highcharts.theme && Highcharts.theme.legendBackgroundColor) ||
"#FFFFFF"
},
exporting: {
enabled: false
},
series: [
{
name: "사망률(%)",
data: (function() {
// generate an array of random data
var data = [],
time = new Date().getTime(),
i;
for (i = -19; i <= 0; i += 1) {
data.push({
x: time + i * 3000,
y: 0
});
}
return data;
})()
}
]
});
Highcharts.chart("container1", {
chart: {
type: "areaspline",
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function() {
// set up the updating of the chart each second
var series = this.series[0];
setInterval(function() {
var x = new Date().getTime(), // 현재 시간
y = Math.random(); //
series.addPoint([x, y], true, true);
}, 3000); //1000=1초
}
}
},
time: {
useUTC: false
},
title: {
text: "실시간 사망률"
},
xAxis: {
type: "datetime",
tickPixelInterval: 150
},
yAxis: {
title: {
text: "Value"
},
plotLines: [
{
value: 0,
width: 1,
color: "#808080"
}
]
},
tooltip: {
headerFormat: "<b>{series.name}</b><br/>",
pointFormat: "{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}"
},
legend: {
//enabled: false
layout: "vertical",
align: "left",
verticalAlign: "top",
x: 120,
y: 70,
floating: true,
borderWidth: 1,
backgroundColor:
(Highcharts.theme && Highcharts.theme.legendBackgroundColor) ||
"#FFFFFF"
},
exporting: {
enabled: false
},
series: [
{
name: "사망률(%)",
data: (function() {
// generate an array of random data
var data = [],
time = new Date().getTime(),
i;
for (i = -19; i <= 0; i += 1) {
data.push({
x: time + i * 3000,
y: 0
});
}
return data;
})()
}
]
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Highcharts Example</title>
<style type="text/css"></style>
</head>
<body>
<script src="../../code/highcharts.js"></script>
<script src="../../code/modules/exporting.js"></script>
<script src="../../code/modules/export-data.js"></script>
<div
id="container"
style="min-width: 310px; height: 400px; margin: 0 auto"
></div>
<script type="text/javascript">
var death = [3, 4, 3, 5, 4, 10, 12,1,2,3];
var temp = [1, 3, 10, 3, 11, 5, 8,4,5,6];
var chart = Highcharts.chart("container", {
chart: {
type: "areaspline"
},
title: {
text: "실시간 사망률"
},
legend: {
layout: "vertical",
align: "left",
verticalAlign: "top",
x: 120,
y: 70,
floating: true,
borderWidth: 1,
backgroundColor:
(Highcharts.theme && Highcharts.theme.legendBackgroundColor) ||
"#FFFFFF"
},
xAxis: {
categories: [
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday",
"Sunday",
"Sunday",
"Sunday",
"Sunday"
],
plotBands: [
{
// 색칠되는 구간
from: 7.5,
to: 10.5,
color: "rgba(68, 170, 213, .2)"
}
]
},
yAxis: {
title: {
text: "Fruit units"
}
},
tooltip: {
shared: true,
valueSuffix: " %", //point mouseover 단위
},
credits: {
enabled: false
},
plotOptions: {
areaspline: {
fillOpacity: 0.5
}
},
series: [
{
name: "사망률(%)",
data: []
},
{
name: "기온('C)",
data: []
}
]
});
death.shift();
temp.shift();
death.push(11);
temp.push(3);
chart.series[0].setData(death);
chart.series[1].setData(temp);
</script>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Highcharts Example</title>
<style type="text/css"></style>
</head>
<body>
<script src="../../code/highcharts.js"></script>
<script src="../../code/modules/exporting.js"></script>
<script src="../../code/modules/export-data.js"></script>
<div
id="container"
style="min-width: 310px; height: 400px; margin: 0 auto"
></div>
<script type="text/javascript">
Highcharts.chart('container', {
chart: {
zoomType: 'xy'
},
title: {
text: 'Average Monthly Temperature and Rainfall in Tokyo'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: [{
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
crosshair: true
}],
yAxis: [{ // Primary yAxis
labels: {
format: '{value}°C',
style: {
color: Highcharts.getOptions().colors[1]
}
},
title: {
text: 'Temperature',
style: {
color: Highcharts.getOptions().colors[1]
}
}
}, { // Secondary yAxis
title: {
text: 'Rainfall',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} mm',
style: {
color: Highcharts.getOptions().colors[0]
}
},
opposite: true
}],
tooltip: {
shared: true
},
legend: {
layout: 'vertical',
align: 'left',
x: 120,
verticalAlign: 'top',
y: 100,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || 'rgba(255,255,255,0.25)'
},
series: [{
name: 'Rainfall',
type: 'areaspline',
yAxis: 1,
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
tooltip: {
valueSuffix: ' mm'
}
}, {
name: 'Temperature',
type: 'spline',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
tooltip: {
valueSuffix: '°C'
}
}]
});
</script>
</body>
</html>
\ No newline at end of file
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Highcharts Example</title>
<style type="text/css">
</style>
</head>
<body>
<script src="../../code/highcharts.js"></script>
<script src="../../code/modules/exporting.js"></script>
<script src="../../code/modules/export-data.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<script type="text/javascript">
Highcharts.chart('container', {
chart: {
type: 'areaspline'
},
title: {
text: '실시간 사망률'
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 150,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
xAxis: {
categories: [
'Monday',
'Tuesday',
'Wednesday',
'Thursday',
'Friday',
'Saturday',
'Sunday'
],
plotBands: [{ // visualize the weekend
from: 4.5,
to: 6.5,
color: 'rgba(68, 170, 213, .2)'
}]
},
yAxis: {
title: {
text: 'Fruit units'
}
},
tooltip: {
shared: true,
valueSuffix: ' units'
},
credits: {
enabled: false
},
plotOptions: {
areaspline: {
fillOpacity: 0.5
}
},
series: [{
name: '사망률',
data: [3, 4, 3, 5, 4, 10, 12]
}, {
name: '기온',
data: [1, 3, 4, 3, 3, 5, 4]
}]
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Highcharts Example</title>
<style type="text/css"></style>
</head>
<body>
<script src="../../code/highcharts.js"></script>
<script src="../../code/modules/exporting.js"></script>
<script src="../../code/modules/export-data.js"></script>
<div
id="container1"
style="width:1260px; height: 400px; margin: 0 auto"
></div>
<div style="width:1275px; margin:0 auto;">
<div style="display: inline-block;">
<div
id="container2"
style="width:400px; height: 300px; padding:0; margin-left:0px;margin-right: 30px;"
></div>
</div>
<div style="display: inline-block;">
<div
id="container3"
style="width:400px; height: 300px; padding:0; margin-left:0px;margin-right: 30px;"
></div>
</div>
<div style="display: inline-block;">
<div
id="container4"
style="width:400px; height: 300px; padding:0; margin-left:0px;"
></div>
</div>
</div>
<script type="text/javascript">
Highcharts.chart("container1", {
chart: {
type: "areaspline",
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function() {
// set up the updating of the chart each second
var series = this.series[0];
setInterval(function() {
var x = new Date().getTime(), // 현재 시간
y = 0.7 //여기에 새로 넣을 값
series.addPoint([x, y], true, true);
}, 1000); //1000=1초 -> 1분=60000
}
}
},
time: {
useUTC: false
},
title: {
text: "실시간 사망률"
},
xAxis: {
type: "datetime",
tickPixelInterval: 150
},
yAxis: {
title: {
text: "Value"
},
plotLines: [
{
value: 0,
width: 1,
color: "#808080"
}
]
},
tooltip: {
headerFormat: "<b>{series.name}</b><br/>",
pointFormat: "{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}"
},
legend: {
//enabled: false
layout: "vertical",
align: "left",
verticalAlign: "top",
x: 120,
y: 70,
floating: true,
borderWidth: 1,
backgroundColor:
(Highcharts.theme && Highcharts.theme.legendBackgroundColor) ||
"#FFFFFF"
},
exporting: {
enabled: false
},
series: [
{
name: "사망률(%)",
data: (function() {
// generate an array of random data
var data = [],
time = new Date().getTime(),
i;
for (i = -19; i <= 0; i += 1) {
data.push({
x: time + i * 1000,
y: 0
});
}
return data;
})()
}
]
});
Highcharts.chart("container2", {
chart: {
type: "spline",
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function() {
// set up the updating of the chart each second
var series = this.series[0];
setInterval(function() {
var x = new Date().getTime(), // 현재 시간
y = Math.random(); //
series.addPoint([x, y], true, true);
}, 3000); //1000=1초
}
}
},
time: {
useUTC: false
},
title: {
text: "실시간 사망률"
},
xAxis: {
type: "datetime",
tickPixelInterval: 150
},
yAxis: {
title: {
text: "Value"
},
plotLines: [
{
value: 0,
width: 1,
color: "#808080"
}
]
},
tooltip: {
headerFormat: "<b>{series.name}</b><br/>",
pointFormat: "{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}"
},
legend: {
//enabled: false
layout: "vertical",
align: "left",
verticalAlign: "top",
x: 120,
y: 70,
floating: true,
borderWidth: 1,
backgroundColor:
(Highcharts.theme && Highcharts.theme.legendBackgroundColor) ||
"#FFFFFF"
},
exporting: {
enabled: false
},
series: [
{
name: "사망률(%)",
data: (function() {
// generate an array of random data
var data = [],
time = new Date().getTime(),
i;
for (i = -19; i <= 0; i += 1) {
data.push({
x: time + i * 3000,
y: 0
});
}
return data;
})()
}
]
});
Highcharts.chart("container3", {
chart: {
type: "spline",
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function() {
// set up the updating of the chart each second
var series = this.series[0];
setInterval(function() {
var x = new Date().getTime(), // 현재 시간
y = Math.random(); //
series.addPoint([x, y], true, true);
}, 3000); //1000=1초
}
}
},
time: {
useUTC: false
},
title: {
text: "실시간 사망률"
},
xAxis: {
type: "datetime",
tickPixelInterval: 150
},
yAxis: {
title: {
text: "Value"
},
plotLines: [
{
value: 0,
width: 1,
color: "#808080"
}
]
},
tooltip: {
headerFormat: "<b>{series.name}</b><br/>",
pointFormat: "{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}"
},
legend: {
//enabled: false
layout: "vertical",
align: "left",
verticalAlign: "top",
x: 120,
y: 70,
floating: true,
borderWidth: 1,
backgroundColor:
(Highcharts.theme && Highcharts.theme.legendBackgroundColor) ||
"#FFFFFF"
},
exporting: {
enabled: false
},
series: [
{
name: "사망률(%)",
data: (function() {
// generate an array of random data
var data = [],
time = new Date().getTime(),
i;
for (i = -19; i <= 0; i += 1) {
data.push({
x: time + i * 3000,
y: 0
});
}
return data;
})()
}
]
});
Highcharts.chart("container4", {
chart: {
type: "spline",
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function() {
// set up the updating of the chart each second
var series = this.series[0];
setInterval(function() {
var x = new Date().getTime(), // 현재 시간
y = Math.random(); //
series.addPoint([x, y], true, true);
}, 3000); //1000=1초
}
}
},
time: {
useUTC: false
},
title: {
text: "실시간 사망률"
},
xAxis: {
type: "datetime",
tickPixelInterval: 150
},
yAxis: {
title: {
text: "Value"
},
plotLines: [
{
value: 0,
width: 1,
color: "#808080"
}
]
},
tooltip: {
headerFormat: "<b>{series.name}</b><br/>",
pointFormat: "{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}"
},
legend: {
//enabled: false
layout: "vertical",
align: "left",
verticalAlign: "top",
x: 120,
y: 70,
floating: true,
borderWidth: 1,
backgroundColor:
(Highcharts.theme && Highcharts.theme.legendBackgroundColor) ||
"#FFFFFF"
},
exporting: {
enabled: false
},
series: [
{
name: "사망률(%)",
data: (function() {
// generate an array of random data
var data = [],
time = new Date().getTime(),
i;
for (i = -19; i <= 0; i += 1) {
data.push({
x: time + i * 3000,
y: 0
});
}
return data;
})()
}
]
});
</script>
</body>
</html>
{
"weather": {
"minutely": [{
"station": {
"longitude": "127.1164",
"latitude": "37.2772",
"name": "기흥구",
"id": "371",
"type": "KMA"
},
"wind": {
"wdir": "189.50",
"wspd": "2.20"
},
"precipitation": {
"sinceOntime": "0.00",
"type": "0"
},
"sky": {
"code": "SKY_A07",
"name": "흐림"
},
"rain": {
"sinceOntime": "0.00",
"sinceMidnight": "",
"last10min": "0.00",
"last15min": "0.00",
"last30min": "0.00",
"last1hour": "0.00",
"last6hour": "0.50",
"last12hour": "0.50",
"last24hour": "0.50"
},
"temperature": {
"tc": "5.90",
"tmax": "7.00",
"tmin": "-1.00"
},
"humidity": "",
"pressure": {
"surface": "",
"seaLevel": ""
},
"lightning": "0",
"timeObservation": "2018-12-06 14:14:00"
}]
"minutely": [
{
"station": {
"longitude": "127.1164",
"latitude": "37.2772",
"name": "기흥구",
"id": "371",
"type": "KMA"
},
"wind": {
"wdir": "189.50",
"wspd": "2.20"
},
"precipitation": {
"sinceOntime": "0.00",
"type": "0"
},
"sky": {
"code": "SKY_A07",
"name": "흐림"
},
"rain": {
"sinceOntime": "0.00",
"sinceMidnight": "",
"last10min": "0.00",
"last15min": "0.00",
"last30min": "0.00",
"last1hour": "0.00",
"last6hour": "0.50",
"last12hour": "0.50",
"last24hour": "0.50"
},
"temperature": {
"tc": "5.90",
"tmax": "7.00",
"tmin": "-1.00"
},
"humidity": "",
"pressure": {
"surface": "",
"seaLevel": ""
},
"lightning": "0",
"timeObservation": "2018-12-06 14:14:00"
}
]
},
"common": {
"alertYn": "Y",
......@@ -54,4 +56,201 @@
"requestUrl": "/weather/current/minutely?appKey=key&lat=37.239795&lon=127.083240",
"message": "성공"
}
},
{
"weather": {
"wIndex": {
"uvindex": [
{
"grid": {
"city": "경기도",
"county": "수원시",
"village": ""
},
"day00": {
"imageUrl": "http://files.weatherplanet.co.kr/weather/01_FCT/INDEX1/20181209/FCT_IDX_A07_1_2018120906_00D.gif",
"index": "20.00",
"comment": "자외선 걱정 없어요"
},
"day01": {
"imageUrl": "http://files.weatherplanet.co.kr/weather/01_FCT/INDEX1/20181209/FCT_IDX_A07_1_2018120906_01D.gif",
"index": "20.00",
"comment": "자외선 걱정 없어요"
},
"day02": {
"imageUrl": "http://files.weatherplanet.co.kr/weather/01_FCT/INDEX1/20181209/FCT_IDX_A07_1_2018120906_02D.gif",
"index": "10.00",
"comment": "자외선 없는 날입니다"
}
}
],
"timeRelease": "2018-12-09 06:00:00"
}
},
"common": {
"alertYn": "Y",
"stormYn": "N"
},
"result": {
"code": 9200,
"requestUrl": "/weather/index/uv?appKey=c13b1a68-ef31-4131-a1b7-4069c263f82d&version=1&lat=37.239795&lon=127.083240",
"message": "성공"
}
}{
"weather": {
"wIndex": {
"thIndex": [
{
"grid": {
"city": "경기",
"county": "용인시 기흥구",
"village": "상갈동"
},
"forecast": {
"timeRelease": "2018-12-09 14:00:00",
"index43hour": "37.85",
"index4hour": "38.40",
"index7hour": "34.36",
"index10hour": "31.08",
"index13hour": "31.08",
"index16hour": "27.60",
"index19hour": "35.76",
"index22hour": "44.84",
"index25hour": "47.47",
"index28hour": "42.45",
"index31hour": "39.37",
"index34hour": "37.85",
"index37hour": "36.54",
"index40hour": "35.73",
"index46hour": "42.99",
"index49hour": "39.12",
"index52hour": "37.79",
"index55hour": "37.13",
"index58hour": "36.29",
"index61hour": "",
"index64hour": "",
"index67hour": ""
},
"current": {
"timeRelease": "2018-12-09 14:00:00",
"index": "40.49"
}
}
]
}
},
"common": {
"alertYn": "Y",
"stormYn": "N"
},
"result": {
"code": 9200,
"requestUrl": "/weather/index/th?appKey=c13b1a68-ef31-4131-a1b7-4069c263f82d&version=1&lat=37.239795&lon=127.083240",
"message": "성공"
}
}{
"weather": {
"wIndex": {
"heatIndex": [
{
"grid": {
"city": "경기",
"county": "용인시 기흥구",
"village": "상갈동"
},
"forecast": {
"timeRelease": "2018-12-09 14:00:00",
"index4hour": "37.28",
"index7hour": "70.81",
"index10hour": "91.57",
"index13hour": "91.57",
"index16hour": "110.30",
"index19hour": "71.89",
"index22hour": "36.40",
"index25hour": "27.82",
"index28hour": "50.39",
"index31hour": "61.62",
"index34hour": "71.05",
"index37hour": "75.20",
"index40hour": "79.01",
"index43hour": "71.05",
"index46hour": "52.61",
"index49hour": "67.96",
"index52hour": "69.50",
"index55hour": "69.08",
"index58hour": "74.43",
"index61hour": "",
"index64hour": "",
"index67hour": ""
},
"current": {
"timeRelease": "2018-12-09 14:00:00",
"index": "32.79"
}
}
]
}
},
"common": {
"alertYn": "Y",
"stormYn": "N"
},
"result": {
"code": 9200,
"requestUrl": "/weather/index/heat?appKey=c13b1a68-ef31-4131-a1b7-4069c263f82d&version=1&lat=37.239795&lon=127.083240",
"message": "성공"
}
}
{
"weather": {
"wIndex": {
"wctIndex": [
{
"grid": {
"city": "경기",
"county": "용인시 기흥구",
"village": "상갈동"
},
"forecast": {
"timeRelease": "2018-12-09 14:00:00",
"index43hour": "-2.17",
"index4hour": "-8.15",
"index7hour": "-6.55",
"index10hour": "-7.00",
"index13hour": "-7.63",
"index16hour": "-9.08",
"index19hour": "-4.71",
"index22hour": "1.18",
"index25hour": "1.53",
"index28hour": "-0.47",
"index31hour": "-3.76",
"index34hour": "-2.37",
"index37hour": "-4.67",
"index40hour": "-4.38",
"index46hour": "-0.67",
"index49hour": "-1.18",
"index52hour": "-2.14",
"index55hour": "-1.65",
"index58hour": "-4.23",
"index61hour": "",
"index64hour": "",
"index67hour": ""
},
"current": {
"timeRelease": "2018-12-09 14:00:00",
"index": "-6.22"
}
}
]
}
},
"common": {
"alertYn": "Y",
"stormYn": "N"
},
"result": {
"code": 9200,
"requestUrl": "/weather/index/wct?appKey=c13b1a68-ef31-4131-a1b7-4069c263f82d&version=1&lat=37.239795&lon=127.083240",
"message": "성공"
}
}
\ No newline at end of file
......
......@@ -21,24 +21,29 @@ module.exports = (server, app) => {
if (err) throw err;
// api의 대답이 있을경우 실행
if (api_res) {
console.log(api_body);
// api_body.weather.minutely[0]
return api_body;
// api_body.weather.minutely[0]
}
});
}
io.on('connection', (socket) => { //웹 페이지 연결시 루프 동작
let API_CALL;
let Current_Weather;
let Sensible_T;
let Heat_index;
let Discomport_index;
let Ultra_Violet_index;
socket.on("connection", () => {
API_CALL = setInterval(() => {
CALL("current","minutely"); //현재날씨 (분별)
CALL("index","wct"); //체감온도
CALL("index","heat"); //열지수
CALL("index","th"); //불쾌지수
CALL("index","uv"); //자외선지수
Current_Weather = CALL("current","minutely"); //현재날씨 (분별)
Sensible_T = CALL("index","wct"); //체감온도
Heat_index = CALL("index","heat"); //열지수
Discomport_index = CALL("index","th"); //불쾌지수
Ultra_Violet_index = CALL("index","uv"); //자외선지수
socket.emit("weatherInfo_minutely_send_to_cliend",info);
}, 60 * 1000); //1분마다 호출
});
......@@ -50,3 +55,4 @@ module.exports = (server, app) => {
}
......
......@@ -1206,4 +1206,4 @@
"integrity": "sha1-AI4G2AlDIMNy28L47XagymyKxBk="
}
}
}
}
\ No newline at end of file
......
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Highcharts Example</title>
<style type="text/css"></style>
</head>
<body>
<h1><%= title %></h1>
<p>Welcome to <%= title %></p>
<script src="../code/highcharts.js"></script>
<script src="../code/modules/exporting.js"></script>
<script src="../code/modules/export-data.js"></script>
<div
id="container1"
style="width:1260px; height: 400px; margin: 0 auto"
></div>
<div style="width:1275px; margin:0 auto;">
<div style="display: inline-block;">
<div
id="container2"
style="width:400px; height: 300px; padding:0; margin-left:0px;margin-right: 30px;"
></div>
</div>
<div style="display: inline-block;">
<div
id="container3"
style="width:400px; height: 300px; padding:0; margin-left:0px;margin-right: 30px;"
></div>
</div>
<div style="display: inline-block;">
<div
id="container4"
style="width:400px; height: 300px; padding:0; margin-left:0px;"
></div>
</div>
</div>
<script type="text/javascript">
Highcharts.chart("container1", {
chart: {
type: "areaspline",
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function() {
// set up the updating of the chart each second
var series = this.series[0];
setInterval(function() {
var x = new Date().getTime(), // 현재 시간
y = 0.7 //여기에 새로 넣을 값
series.addPoint([x, y], true, true);
}, 1000); //1000=1초 -> 1분=60000
}
}
},
time: {
useUTC: false
},
title: {
text: "실시간 사망률"
},
xAxis: {
type: "datetime",
tickPixelInterval: 150
},
yAxis: {
title: {
text: "Value"
},
plotLines: [
{
value: 0,
width: 1,
color: "#808080"
}
]
},
tooltip: {
headerFormat: "<b>{series.name}</b><br/>",
pointFormat: "{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}"
},
legend: {
//enabled: false
layout: "vertical",
align: "left",
verticalAlign: "top",
x: 120,
y: 70,
floating: true,
borderWidth: 1,
backgroundColor:
(Highcharts.theme && Highcharts.theme.legendBackgroundColor) ||
"#FFFFFF"
},
exporting: {
enabled: false
},
series: [
{
name: "사망률(%)",
data: (function() {
// generate an array of random data
var data = [],
time = new Date().getTime(),
i;
for (i = -19; i <= 0; i += 1) {
data.push({
x: time + i * 1000,
y: 0
});
}
return data;
})()
}
]
});
Highcharts.chart("container2", {
chart: {
type: "spline",
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function() {
// set up the updating of the chart each second
var series = this.series[0];
setInterval(function() {
var x = new Date().getTime(), // 현재 시간
y = Math.random(); //
series.addPoint([x, y], true, true);
}, 3000); //1000=1초
}
}
},
time: {
useUTC: false
},
title: {
text: "실시간 사망률"
},
xAxis: {
type: "datetime",
tickPixelInterval: 150
},
yAxis: {
title: {
text: "Value"
},
plotLines: [
{
value: 0,
width: 1,
color: "#808080"
}
]
},
tooltip: {
headerFormat: "<b>{series.name}</b><br/>",
pointFormat: "{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}"
},
legend: {
//enabled: false
layout: "vertical",
align: "left",
verticalAlign: "top",
x: 120,
y: 70,
floating: true,
borderWidth: 1,
backgroundColor:
(Highcharts.theme && Highcharts.theme.legendBackgroundColor) ||
"#FFFFFF"
},
exporting: {
enabled: false
},
series: [
{
name: "사망률(%)",
data: (function() {
// generate an array of random data
var data = [],
time = new Date().getTime(),
i;
for (i = -19; i <= 0; i += 1) {
data.push({
x: time + i * 3000,
y: 0
});
}
return data;
})()
}
]
});
Highcharts.chart("container3", {
chart: {
type: "spline",
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function() {
// set up the updating of the chart each second
var series = this.series[0];
setInterval(function() {
var x = new Date().getTime(), // 현재 시간
y = Math.random(); //
series.addPoint([x, y], true, true);
}, 3000); //1000=1초
}
}
},
time: {
useUTC: false
},
title: {
text: "실시간 사망률"
},
xAxis: {
type: "datetime",
tickPixelInterval: 150
},
yAxis: {
title: {
text: "Value"
},
plotLines: [
{
value: 0,
width: 1,
color: "#808080"
}
]
},
tooltip: {
headerFormat: "<b>{series.name}</b><br/>",
pointFormat: "{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}"
},
legend: {
//enabled: false
layout: "vertical",
align: "left",
verticalAlign: "top",
x: 120,
y: 70,
floating: true,
borderWidth: 1,
backgroundColor:
(Highcharts.theme && Highcharts.theme.legendBackgroundColor) ||
"#FFFFFF"
},
exporting: {
enabled: false
},
series: [
{
name: "사망률(%)",
data: (function() {
// generate an array of random data
var data = [],
time = new Date().getTime(),
i;
for (i = -19; i <= 0; i += 1) {
data.push({
x: time + i * 3000,
y: 0
});
}
return data;
})()
}
]
});
Highcharts.chart("container4", {
chart: {
type: "spline",
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function() {
// set up the updating of the chart each second
var series = this.series[0];
setInterval(function() {
var x = new Date().getTime(), // 현재 시간
y = Math.random(); //
series.addPoint([x, y], true, true);
}, 3000); //1000=1초
}
}
},
time: {
useUTC: false
},
title: {
text: "실시간 사망률"
},
xAxis: {
type: "datetime",
tickPixelInterval: 150
},
yAxis: {
title: {
text: "Value"
},
plotLines: [
{
value: 0,
width: 1,
color: "#808080"
}
]
},
tooltip: {
headerFormat: "<b>{series.name}</b><br/>",
pointFormat: "{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}"
},
legend: {
//enabled: false
layout: "vertical",
align: "left",
verticalAlign: "top",
x: 120,
y: 70,
floating: true,
borderWidth: 1,
backgroundColor:
(Highcharts.theme && Highcharts.theme.legendBackgroundColor) ||
"#FFFFFF"
},
exporting: {
enabled: false
},
series: [
{
name: "사망률(%)",
data: (function() {
// generate an array of random data
var data = [],
time = new Date().getTime(),
i;
for (i = -19; i <= 0; i += 1) {
data.push({
x: time + i * 3000,
y: 0
});
}
return data;
})()
}
]
});
</script>
</body>
</html>
......