2019-2-OpenSourceSW / Probability Death

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 2196 additions and 116 deletions
This diff could not be displayed because it is too large.
...@@ -6,24 +6,588 @@ ...@@ -6,24 +6,588 @@
6 6
7 License: www.highcharts.com/license 7 License: www.highcharts.com/license
8 */ 8 */
9 -(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, 9 +(function(g) {
10 -{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", 10 + "object" === typeof module && module.exports
11 -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", 11 + ? (module.exports = g)
12 -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", 12 + : "function" === typeof define && define.amd
13 -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'+ 13 + ? define(function() {
14 -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, 14 + return g;
15 -'$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)|| 15 + })
16 -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&& 16 + : g(Highcharts);
17 -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}}, 17 +})(function(g) {
18 -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, 18 + (function(f) {
19 -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, 19 + var g = f.defaultOptions,
20 -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= 20 + y = f.doc,
21 -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|| 21 + z = f.Chart,
22 -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= 22 + q = f.addEvent,
23 -!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)}); 23 + H = f.removeEvent,
24 -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, 24 + B = f.fireEvent,
25 -"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&& 25 + r = f.createElement,
26 -(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; 26 + C = f.discardElement,
27 -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, 27 + u = f.css,
28 -"redraw",a.renderExporting)})})(g)}); 28 + p = f.merge,
29 + A = f.pick,
30 + l = f.each,
31 + E = f.objectEach,
32 + t = f.extend,
33 + I = f.isTouchDevice,
34 + D = f.win,
35 + F = D.navigator.userAgent,
36 + J = f.Renderer.prototype.symbols;
37 + /Edge\/|Trident\/|MSIE /.test(F);
38 + /firefox/i.test(F);
39 + t(g.lang, {
40 + printChart: "Print chart",
41 + downloadPNG: "Download PNG image",
42 + downloadJPEG: "Download JPEG image",
43 + downloadPDF: "Download PDF document",
44 + downloadSVG: "Download SVG vector image",
45 + contextButtonTitle: "Chart context menu"
46 + });
47 + g.navigation = {
48 + buttonOptions: {
49 + theme: {},
50 + symbolSize: 14,
51 + symbolX: 12.5,
52 + symbolY: 10.5,
53 + align: "right",
54 + buttonSpacing: 3,
55 + height: 22,
56 + verticalAlign: "top",
57 + width: 24
58 + }
59 + };
60 + p(!0, g.navigation, {
61 + menuStyle: {
62 + border: "1px solid #999999",
63 + background: "#ffffff",
64 + padding: "5px 0"
65 + },
66 + menuItemStyle: {
67 + padding: "0.5em 1em",
68 + background: "none",
69 + color: "#333333",
70 + fontSize: I ? "14px" : "11px",
71 + transition: "background 250ms, color 250ms"
72 + },
73 + menuItemHoverStyle: { background: "#335cad", color: "#ffffff" },
74 + buttonOptions: {
75 + symbolFill: "#666666",
76 + symbolStroke: "#666666",
77 + symbolStrokeWidth: 3,
78 + theme: { fill: "#ffffff", stroke: "none", padding: 5 }
79 + }
80 + });
81 + g.exporting = {
82 + type: "image/png",
83 + url: "https://export.highcharts.com/",
84 + printMaxWidth: 780,
85 + scale: 2,
86 + buttons: {
87 + contextButton: {
88 + className: "highcharts-contextbutton",
89 + menuClassName: "highcharts-contextmenu",
90 + symbol: "menu",
91 + titleKey: "contextButtonTitle",
92 + menuItems: "printChart separator downloadPNG downloadJPEG downloadPDF downloadSVG".split(
93 + " "
94 + )
95 + }
96 + },
97 + menuItemDefinitions: {
98 + printChart: {
99 + textKey: "printChart",
100 + onclick: function() {
101 + this.print();
102 + }
103 + },
104 + separator: { separator: !0 },
105 + downloadPNG: {
106 + textKey: "downloadPNG",
107 + onclick: function() {
108 + this.exportChart();
109 + }
110 + },
111 + downloadJPEG: {
112 + textKey: "downloadJPEG",
113 + onclick: function() {
114 + this.exportChart({ type: "image/jpeg" });
115 + }
116 + },
117 + downloadPDF: {
118 + textKey: "downloadPDF",
119 + onclick: function() {
120 + this.exportChart({ type: "application/pdf" });
121 + }
122 + },
123 + downloadSVG: {
124 + textKey: "downloadSVG",
125 + onclick: function() {
126 + this.exportChart({ type: "image/svg+xml" });
127 + }
128 + }
129 + }
130 + };
131 + f.post = function(a, b, e) {
132 + var c = r(
133 + "form",
134 + p({ method: "post", action: a, enctype: "multipart/form-data" }, e),
135 + { display: "none" },
136 + y.body
137 + );
138 + E(b, function(a, b) {
139 + r("input", { type: "hidden", name: b, value: a }, null, c);
140 + });
141 + c.submit();
142 + C(c);
143 + };
144 + t(z.prototype, {
145 + sanitizeSVG: function(a, b) {
146 + if (b && b.exporting && b.exporting.allowHTML) {
147 + var e = a.match(/<\/svg>(.*?$)/);
148 + e &&
149 + e[1] &&
150 + ((e =
151 + '\x3cforeignObject x\x3d"0" y\x3d"0" width\x3d"' +
152 + b.chart.width +
153 + '" height\x3d"' +
154 + b.chart.height +
155 + '"\x3e\x3cbody xmlns\x3d"http://www.w3.org/1999/xhtml"\x3e' +
156 + e[1] +
157 + "\x3c/body\x3e\x3c/foreignObject\x3e"),
158 + (a = a.replace("\x3c/svg\x3e", e + "\x3c/svg\x3e")));
159 + }
160 + a = a
161 + .replace(/zIndex="[^"]+"/g, "")
162 + .replace(/symbolName="[^"]+"/g, "")
163 + .replace(/jQuery[0-9]+="[^"]+"/g, "")
164 + .replace(/url\(("|&quot;)(\S+)("|&quot;)\)/g, "url($2)")
165 + .replace(/url\([^#]+#/g, "url(#")
166 + .replace(
167 + /<svg /,
168 + '\x3csvg xmlns:xlink\x3d"http://www.w3.org/1999/xlink" '
169 + )
170 + .replace(/ (|NS[0-9]+\:)href=/g, " xlink:href\x3d")
171 + .replace(/\n/, " ")
172 + .replace(/<\/svg>.*?$/, "\x3c/svg\x3e")
173 + .replace(
174 + /(fill|stroke)="rgba\(([ 0-9]+,[ 0-9]+,[ 0-9]+),([ 0-9\.]+)\)"/g,
175 + '$1\x3d"rgb($2)" $1-opacity\x3d"$3"'
176 + )
177 + .replace(/&nbsp;/g, "\u00a0")
178 + .replace(/&shy;/g, "\u00ad");
179 + this.ieSanitizeSVG && (a = this.ieSanitizeSVG(a));
180 + return a;
181 + },
182 + getChartHTML: function() {
183 + return this.container.innerHTML;
184 + },
185 + getSVG: function(a) {
186 + var b,
187 + e,
188 + c,
189 + v,
190 + m,
191 + h = p(this.options, a);
192 + e = r(
193 + "div",
194 + null,
195 + {
196 + position: "absolute",
197 + top: "-9999em",
198 + width: this.chartWidth + "px",
199 + height: this.chartHeight + "px"
200 + },
201 + y.body
202 + );
203 + c = this.renderTo.style.width;
204 + m = this.renderTo.style.height;
205 + c =
206 + h.exporting.sourceWidth ||
207 + h.chart.width ||
208 + (/px$/.test(c) && parseInt(c, 10)) ||
209 + 600;
210 + m =
211 + h.exporting.sourceHeight ||
212 + h.chart.height ||
213 + (/px$/.test(m) && parseInt(m, 10)) ||
214 + 400;
215 + t(h.chart, {
216 + animation: !1,
217 + renderTo: e,
218 + forExport: !0,
219 + renderer: "SVGRenderer",
220 + width: c,
221 + height: m
222 + });
223 + h.exporting.enabled = !1;
224 + delete h.data;
225 + h.series = [];
226 + l(this.series, function(a) {
227 + v = p(a.userOptions, {
228 + animation: !1,
229 + enableMouseTracking: !1,
230 + showCheckbox: !1,
231 + visible: a.visible
232 + });
233 + v.isInternal || h.series.push(v);
234 + });
235 + l(this.axes, function(a) {
236 + a.userOptions.internalKey ||
237 + (a.userOptions.internalKey = f.uniqueKey());
238 + });
239 + b = new f.Chart(h, this.callback);
240 + a &&
241 + l(["xAxis", "yAxis", "series"], function(c) {
242 + var d = {};
243 + a[c] && ((d[c] = a[c]), b.update(d));
244 + });
245 + l(this.axes, function(a) {
246 + var c = f.find(b.axes, function(b) {
247 + return b.options.internalKey === a.userOptions.internalKey;
248 + }),
249 + d = a.getExtremes(),
250 + e = d.userMin,
251 + d = d.userMax;
252 + c &&
253 + ((void 0 !== e && e !== c.min) || (void 0 !== d && d !== c.max)) &&
254 + c.setExtremes(e, d, !0, !1);
255 + });
256 + c = b.getChartHTML();
257 + B(this, "getSVG", { chartCopy: b });
258 + c = this.sanitizeSVG(c, h);
259 + h = null;
260 + b.destroy();
261 + C(e);
262 + return c;
263 + },
264 + getSVGForExport: function(a, b) {
265 + var e = this.options.exporting;
266 + return this.getSVG(
267 + p({ chart: { borderRadius: 0 } }, e.chartOptions, b, {
268 + exporting: {
269 + sourceWidth: (a && a.sourceWidth) || e.sourceWidth,
270 + sourceHeight: (a && a.sourceHeight) || e.sourceHeight
271 + }
272 + })
273 + );
274 + },
275 + exportChart: function(a, b) {
276 + b = this.getSVGForExport(a, b);
277 + a = p(this.options.exporting, a);
278 + f.post(
279 + a.url,
280 + {
281 + filename: a.filename || "chart",
282 + type: a.type,
283 + width: a.width || 0,
284 + scale: a.scale,
285 + svg: b
286 + },
287 + a.formAttributes
288 + );
289 + },
290 + print: function() {
291 + var a = this,
292 + b = a.container,
293 + e = [],
294 + c = b.parentNode,
295 + f = y.body,
296 + m = f.childNodes,
297 + h = a.options.exporting.printMaxWidth,
298 + d,
299 + n;
300 + if (!a.isPrinting) {
301 + a.isPrinting = !0;
302 + a.pointer.reset(null, 0);
303 + B(a, "beforePrint");
304 + if ((n = h && a.chartWidth > h))
305 + (d = [a.options.chart.width, void 0, !1]), a.setSize(h, void 0, !1);
306 + l(m, function(a, b) {
307 + 1 === a.nodeType &&
308 + ((e[b] = a.style.display), (a.style.display = "none"));
309 + });
310 + f.appendChild(b);
311 + setTimeout(function() {
312 + D.focus();
313 + D.print();
314 + setTimeout(function() {
315 + c.appendChild(b);
316 + l(m, function(a, b) {
317 + 1 === a.nodeType && (a.style.display = e[b]);
318 + });
319 + a.isPrinting = !1;
320 + n && a.setSize.apply(a, d);
321 + B(a, "afterPrint");
322 + }, 1e3);
323 + }, 1);
324 + }
325 + },
326 + contextMenu: function(a, b, e, c, v, m, h) {
327 + var d = this,
328 + n = d.options.navigation,
329 + g = d.chartWidth,
330 + G = d.chartHeight,
331 + p = "cache-" + a,
332 + k = d[p],
333 + w = Math.max(v, m),
334 + x;
335 + k ||
336 + ((d.exportContextMenu = d[p] = k = r(
337 + "div",
338 + { className: a },
339 + {
340 + position: "absolute",
341 + zIndex: 1e3,
342 + padding: w + "px",
343 + pointerEvents: "auto"
344 + },
345 + d.fixedDiv || d.container
346 + )),
347 + (x = r("div", { className: "highcharts-menu" }, null, k)),
348 + u(
349 + x,
350 + t(
351 + {
352 + MozBoxShadow: "3px 3px 10px #888",
353 + WebkitBoxShadow: "3px 3px 10px #888",
354 + boxShadow: "3px 3px 10px #888"
355 + },
356 + n.menuStyle
357 + )
358 + ),
359 + (k.hideMenu = function() {
360 + u(k, { display: "none" });
361 + h && h.setState(0);
362 + d.openMenu = !1;
363 + f.clearTimeout(k.hideTimer);
364 + }),
365 + d.exportEvents.push(
366 + q(k, "mouseleave", function() {
367 + k.hideTimer = setTimeout(k.hideMenu, 500);
368 + }),
369 + q(k, "mouseenter", function() {
370 + f.clearTimeout(k.hideTimer);
371 + }),
372 + q(y, "mouseup", function(b) {
373 + d.pointer.inClass(b.target, a) || k.hideMenu();
374 + }),
375 + q(k, "click", function() {
376 + d.openMenu && k.hideMenu();
377 + })
378 + ),
379 + l(b, function(a) {
380 + "string" === typeof a &&
381 + (a = d.options.exporting.menuItemDefinitions[a]);
382 + if (f.isObject(a, !0)) {
383 + var b;
384 + a.separator
385 + ? (b = r("hr", null, null, x))
386 + : ((b = r(
387 + "div",
388 + {
389 + className: "highcharts-menu-item",
390 + onclick: function(b) {
391 + b && b.stopPropagation();
392 + k.hideMenu();
393 + a.onclick && a.onclick.apply(d, arguments);
394 + },
395 + innerHTML: a.text || d.options.lang[a.textKey]
396 + },
397 + null,
398 + x
399 + )),
400 + (b.onmouseover = function() {
401 + u(this, n.menuItemHoverStyle);
402 + }),
403 + (b.onmouseout = function() {
404 + u(this, n.menuItemStyle);
405 + }),
406 + u(b, t({ cursor: "pointer" }, n.menuItemStyle)));
407 + d.exportDivElements.push(b);
408 + }
409 + }),
410 + d.exportDivElements.push(x, k),
411 + (d.exportMenuWidth = k.offsetWidth),
412 + (d.exportMenuHeight = k.offsetHeight));
413 + b = { display: "block" };
414 + e + d.exportMenuWidth > g
415 + ? (b.right = g - e - v - w + "px")
416 + : (b.left = e - w + "px");
417 + c + m + d.exportMenuHeight > G && "top" !== h.alignOptions.verticalAlign
418 + ? (b.bottom = G - c - w + "px")
419 + : (b.top = c + m - w + "px");
420 + u(k, b);
421 + d.openMenu = !0;
422 + },
423 + addButton: function(a) {
424 + var b = this,
425 + e = b.renderer,
426 + c = p(b.options.navigation.buttonOptions, a),
427 + f = c.onclick,
428 + m = c.menuItems,
429 + h,
430 + d,
431 + n = c.symbolSize || 12;
432 + b.btnCount || (b.btnCount = 0);
433 + b.exportDivElements ||
434 + ((b.exportDivElements = []), (b.exportSVGElements = []));
435 + if (!1 !== c.enabled) {
436 + var g = c.theme,
437 + l = g.states,
438 + q = l && l.hover,
439 + l = l && l.select,
440 + k;
441 + delete g.states;
442 + f
443 + ? (k = function(a) {
444 + a && a.stopPropagation();
445 + f.call(b, a);
446 + })
447 + : m &&
448 + (k = function(a) {
449 + a && a.stopPropagation();
450 + b.contextMenu(
451 + d.menuClassName,
452 + m,
453 + d.translateX,
454 + d.translateY,
455 + d.width,
456 + d.height,
457 + d
458 + );
459 + d.setState(2);
460 + });
461 + c.text && c.symbol
462 + ? (g.paddingLeft = A(g.paddingLeft, 25))
463 + : c.text || t(g, { width: c.width, height: c.height, padding: 0 });
464 + d = e
465 + .button(c.text, 0, 0, k, g, q, l)
466 + .addClass(a.className)
467 + .attr({
468 + "stroke-linecap": "round",
469 + title: A(b.options.lang[c._titleKey || c.titleKey], "")
470 + });
471 + d.menuClassName =
472 + a.menuClassName || "highcharts-menu-" + b.btnCount++;
473 + c.symbol &&
474 + ((h = e
475 + .symbol(c.symbol, c.symbolX - n / 2, c.symbolY - n / 2, n, n, {
476 + width: n,
477 + height: n
478 + })
479 + .addClass("highcharts-button-symbol")
480 + .attr({ zIndex: 1 })
481 + .add(d)),
482 + h.attr({
483 + stroke: c.symbolStroke,
484 + fill: c.symbolFill,
485 + "stroke-width": c.symbolStrokeWidth || 1
486 + }));
487 + d.add(b.exportingGroup).align(
488 + t(c, { width: d.width, x: A(c.x, b.buttonOffset) }),
489 + !0,
490 + "spacingBox"
491 + );
492 + b.buttonOffset +=
493 + (d.width + c.buttonSpacing) * ("right" === c.align ? -1 : 1);
494 + b.exportSVGElements.push(d, h);
495 + }
496 + },
497 + destroyExport: function(a) {
498 + var b = a ? a.target : this;
499 + a = b.exportSVGElements;
500 + var e = b.exportDivElements,
501 + c = b.exportEvents,
502 + g;
503 + a &&
504 + (l(a, function(a, c) {
505 + a &&
506 + ((a.onclick = a.ontouchstart = null),
507 + (g = "cache-" + a.menuClassName),
508 + b[g] && delete b[g],
509 + (b.exportSVGElements[c] = a.destroy()));
510 + }),
511 + (a.length = 0));
512 + b.exportingGroup &&
513 + (b.exportingGroup.destroy(), delete b.exportingGroup);
514 + e &&
515 + (l(e, function(a, c) {
516 + f.clearTimeout(a.hideTimer);
517 + H(a, "mouseleave");
518 + b.exportDivElements[
519 + c
520 + ] = a.onmouseout = a.onmouseover = a.ontouchstart = a.onclick = null;
521 + C(a);
522 + }),
523 + (e.length = 0));
524 + c &&
525 + (l(c, function(a) {
526 + a();
527 + }),
528 + (c.length = 0));
529 + }
530 + });
531 + J.menu = function(a, b, e, c) {
532 + return [
533 + "M",
534 + a,
535 + b + 2.5,
536 + "L",
537 + a + e,
538 + b + 2.5,
539 + "M",
540 + a,
541 + b + c / 2 + 0.5,
542 + "L",
543 + a + e,
544 + b + c / 2 + 0.5,
545 + "M",
546 + a,
547 + b + c - 1.5,
548 + "L",
549 + a + e,
550 + b + c - 1.5
551 + ];
552 + };
553 + z.prototype.renderExporting = function() {
554 + var a = this,
555 + b = a.options.exporting,
556 + e = b.buttons,
557 + c = a.isDirtyExporting || !a.exportSVGElements;
558 + a.buttonOffset = 0;
559 + a.isDirtyExporting && a.destroyExport();
560 + c &&
561 + !1 !== b.enabled &&
562 + ((a.exportEvents = []),
563 + (a.exportingGroup =
564 + a.exportingGroup ||
565 + a.renderer
566 + .g("exporting-group")
567 + .attr({ zIndex: 3 })
568 + .add()),
569 + E(e, function(b) {
570 + a.addButton(b);
571 + }),
572 + (a.isDirtyExporting = !1));
573 + q(a, "destroy", a.destroyExport);
574 + };
575 + q(z, "init", function() {
576 + var a = this;
577 + l(["exporting", "navigation"], function(b) {
578 + a[b] = {
579 + update: function(e, c) {
580 + a.isDirtyExporting = !0;
581 + p(!0, a.options[b], e);
582 + A(c, !0) && a.redraw();
583 + }
584 + };
585 + });
586 + });
587 + z.prototype.callbacks.push(function(a) {
588 + a.renderExporting();
589 + q(a, "redraw", a.renderExporting);
590 + });
591 + })(g);
592 +});
29 //# sourceMappingURL=exporting.js.map 593 //# sourceMappingURL=exporting.js.map
......
1 +<!DOCTYPE html>
2 +<html>
3 + <head>
4 + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 + <meta name="viewport" content="width=device-width, initial-scale=1" />
6 + <title>Highcharts Example</title>
7 +
8 + <style type="text/css"></style>
9 + </head>
10 + <body>
11 + <script src="../../code/highcharts.js"></script>
12 + <script src="../../code/modules/exporting.js"></script>
13 + <script src="../../code/modules/export-data.js"></script>
14 +
15 + <div
16 + id="container1"
17 + style="width:1260px; height: 400px; margin: 0 auto"
18 + ></div>
19 +
20 +<div style="width:1275px; margin:0 auto;">
21 + <div style="display: inline-block;">
22 + <div
23 + id="container2"
24 + style="width:400px; height: 300px; padding:0; margin-left:0px;margin-right: 30px;"
25 + ></div>
26 + </div>
27 + <div style="display: inline-block;">
28 + <div
29 + id="container3"
30 + style="width:400px; height: 300px; padding:0; margin-left:0px;margin-right: 30px;"
31 + ></div>
32 + </div>
33 +
34 + <div style="display: inline-block;">
35 + <div
36 + id="container4"
37 + style="width:400px; height: 300px; padding:0; margin-left:0px;"
38 + ></div>
39 + </div>
40 +
41 +</div>
42 +
43 + <script type="text/javascript">
44 + Highcharts.chart("container1", {
45 + chart: {
46 + type: "areaspline",
47 + animation: Highcharts.svg, // don't animate in old IE
48 + marginRight: 10,
49 + events: {
50 + load: function() {
51 + // set up the updating of the chart each second
52 + var series = this.series[0];
53 + setInterval(function() {
54 + var x = new Date().getTime(), // 현재 시간
55 + y = 0.7
56 + series.addPoint([x, y], true, true);
57 + }, 3000); //1000=1초
58 + }
59 + }
60 + },
61 +
62 + time: {
63 + useUTC: false
64 + },
65 +
66 + title: {
67 + text: "실시간 사망률"
68 + },
69 + xAxis: {
70 + type: "datetime",
71 + tickPixelInterval: 150
72 + },
73 + yAxis: {
74 + title: {
75 + text: "Value"
76 + },
77 + plotLines: [
78 + {
79 + value: 0,
80 + width: 1,
81 + color: "#808080"
82 + }
83 + ]
84 + },
85 + tooltip: {
86 + headerFormat: "<b>{series.name}</b><br/>",
87 + pointFormat: "{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}"
88 + },
89 + legend: {
90 + //enabled: false
91 + layout: "vertical",
92 + align: "left",
93 + verticalAlign: "top",
94 + x: 120,
95 + y: 70,
96 + floating: true,
97 + borderWidth: 1,
98 + backgroundColor:
99 + (Highcharts.theme && Highcharts.theme.legendBackgroundColor) ||
100 + "#FFFFFF"
101 + },
102 + exporting: {
103 + enabled: false
104 + },
105 + series: [
106 + {
107 + name: "사망률(%)",
108 + data: (function() {
109 + // generate an array of random data
110 + var data = [],
111 + time = new Date().getTime(),
112 + i;
113 +
114 + for (i = -19; i <= 0; i += 1) {
115 + data.push({
116 + x: time + i * 3000,
117 + y: 0
118 + });
119 + }
120 + return data;
121 + })()
122 + }
123 + ]
124 + });
125 +
126 + Highcharts.chart("container2", {
127 + chart: {
128 + type: "spline",
129 + animation: Highcharts.svg, // don't animate in old IE
130 + marginRight: 10,
131 + events: {
132 + load: function() {
133 + // set up the updating of the chart each second
134 + var series = this.series[0];
135 + setInterval(function() {
136 + var x = new Date().getTime(), // 현재 시간
137 + y = Math.random(); //
138 + series.addPoint([x, y], true, true);
139 + }, 3000); //1000=1초
140 + }
141 + }
142 + },
143 +
144 + time: {
145 + useUTC: false
146 + },
147 +
148 + title: {
149 + text: "실시간 사망률"
150 + },
151 + xAxis: {
152 + type: "datetime",
153 + tickPixelInterval: 150
154 + },
155 + yAxis: {
156 + title: {
157 + text: "Value"
158 + },
159 + plotLines: [
160 + {
161 + value: 0,
162 + width: 1,
163 + color: "#808080"
164 + }
165 + ]
166 + },
167 + tooltip: {
168 + headerFormat: "<b>{series.name}</b><br/>",
169 + pointFormat: "{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}"
170 + },
171 + legend: {
172 + //enabled: false
173 + layout: "vertical",
174 + align: "left",
175 + verticalAlign: "top",
176 + x: 120,
177 + y: 70,
178 + floating: true,
179 + borderWidth: 1,
180 + backgroundColor:
181 + (Highcharts.theme && Highcharts.theme.legendBackgroundColor) ||
182 + "#FFFFFF"
183 + },
184 + exporting: {
185 + enabled: false
186 + },
187 + series: [
188 + {
189 + name: "사망률(%)",
190 + data: (function() {
191 + // generate an array of random data
192 + var data = [],
193 + time = new Date().getTime(),
194 + i;
195 +
196 + for (i = -19; i <= 0; i += 1) {
197 + data.push({
198 + x: time + i * 3000,
199 + y: 0
200 + });
201 + }
202 + return data;
203 + })()
204 + }
205 + ]
206 + });
207 +
208 + Highcharts.chart("container3", {
209 + chart: {
210 + type: "spline",
211 + animation: Highcharts.svg, // don't animate in old IE
212 + marginRight: 10,
213 + events: {
214 + load: function() {
215 + // set up the updating of the chart each second
216 + var series = this.series[0];
217 + setInterval(function() {
218 + var x = new Date().getTime(), // 현재 시간
219 + y = Math.random(); //
220 + series.addPoint([x, y], true, true);
221 + }, 3000); //1000=1초
222 + }
223 + }
224 + },
225 +
226 + time: {
227 + useUTC: false
228 + },
229 +
230 + title: {
231 + text: "실시간 사망률"
232 + },
233 + xAxis: {
234 + type: "datetime",
235 + tickPixelInterval: 150
236 + },
237 + yAxis: {
238 + title: {
239 + text: "Value"
240 + },
241 + plotLines: [
242 + {
243 + value: 0,
244 + width: 1,
245 + color: "#808080"
246 + }
247 + ]
248 + },
249 + tooltip: {
250 + headerFormat: "<b>{series.name}</b><br/>",
251 + pointFormat: "{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}"
252 + },
253 + legend: {
254 + //enabled: false
255 + layout: "vertical",
256 + align: "left",
257 + verticalAlign: "top",
258 + x: 120,
259 + y: 70,
260 + floating: true,
261 + borderWidth: 1,
262 + backgroundColor:
263 + (Highcharts.theme && Highcharts.theme.legendBackgroundColor) ||
264 + "#FFFFFF"
265 + },
266 + exporting: {
267 + enabled: false
268 + },
269 + series: [
270 + {
271 + name: "사망률(%)",
272 + data: (function() {
273 + // generate an array of random data
274 + var data = [],
275 + time = new Date().getTime(),
276 + i;
277 +
278 + for (i = -19; i <= 0; i += 1) {
279 + data.push({
280 + x: time + i * 3000,
281 + y: 0
282 + });
283 + }
284 + return data;
285 + })()
286 + }
287 + ]
288 + });
289 +
290 + Highcharts.chart("container4", {
291 + chart: {
292 + type: "spline",
293 + animation: Highcharts.svg, // don't animate in old IE
294 + marginRight: 10,
295 + events: {
296 + load: function() {
297 + // set up the updating of the chart each second
298 + var series = this.series[0];
299 + setInterval(function() {
300 + var x = new Date().getTime(), // 현재 시간
301 + y = Math.random(); //
302 + series.addPoint([x, y], true, true);
303 + }, 3000); //1000=1초
304 + }
305 + }
306 + },
307 +
308 + time: {
309 + useUTC: false
310 + },
311 +
312 + title: {
313 + text: "실시간 사망률"
314 + },
315 + xAxis: {
316 + type: "datetime",
317 + tickPixelInterval: 150
318 + },
319 + yAxis: {
320 + title: {
321 + text: "Value"
322 + },
323 + plotLines: [
324 + {
325 + value: 0,
326 + width: 1,
327 + color: "#808080"
328 + }
329 + ]
330 + },
331 + tooltip: {
332 + headerFormat: "<b>{series.name}</b><br/>",
333 + pointFormat: "{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}"
334 + },
335 + legend: {
336 + //enabled: false
337 + layout: "vertical",
338 + align: "left",
339 + verticalAlign: "top",
340 + x: 120,
341 + y: 70,
342 + floating: true,
343 + borderWidth: 1,
344 + backgroundColor:
345 + (Highcharts.theme && Highcharts.theme.legendBackgroundColor) ||
346 + "#FFFFFF"
347 + },
348 + exporting: {
349 + enabled: false
350 + },
351 + series: [
352 + {
353 + name: "사망률(%)",
354 + data: (function() {
355 + // generate an array of random data
356 + var data = [],
357 + time = new Date().getTime(),
358 + i;
359 +
360 + for (i = -19; i <= 0; i += 1) {
361 + data.push({
362 + x: time + i * 3000,
363 + y: 0
364 + });
365 + }
366 + return data;
367 + })()
368 + }
369 + ]
370 + });
371 +
372 + Highcharts.chart("container1", {
373 + chart: {
374 + type: "areaspline",
375 + animation: Highcharts.svg, // don't animate in old IE
376 + marginRight: 10,
377 + events: {
378 + load: function() {
379 + // set up the updating of the chart each second
380 + var series = this.series[0];
381 + setInterval(function() {
382 + var x = new Date().getTime(), // 현재 시간
383 + y = Math.random(); //
384 + series.addPoint([x, y], true, true);
385 + }, 3000); //1000=1초
386 + }
387 + }
388 + },
389 +
390 + time: {
391 + useUTC: false
392 + },
393 +
394 + title: {
395 + text: "실시간 사망률"
396 + },
397 + xAxis: {
398 + type: "datetime",
399 + tickPixelInterval: 150
400 + },
401 + yAxis: {
402 + title: {
403 + text: "Value"
404 + },
405 + plotLines: [
406 + {
407 + value: 0,
408 + width: 1,
409 + color: "#808080"
410 + }
411 + ]
412 + },
413 + tooltip: {
414 + headerFormat: "<b>{series.name}</b><br/>",
415 + pointFormat: "{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}"
416 + },
417 + legend: {
418 + //enabled: false
419 + layout: "vertical",
420 + align: "left",
421 + verticalAlign: "top",
422 + x: 120,
423 + y: 70,
424 + floating: true,
425 + borderWidth: 1,
426 + backgroundColor:
427 + (Highcharts.theme && Highcharts.theme.legendBackgroundColor) ||
428 + "#FFFFFF"
429 + },
430 + exporting: {
431 + enabled: false
432 + },
433 + series: [
434 + {
435 + name: "사망률(%)",
436 + data: (function() {
437 + // generate an array of random data
438 + var data = [],
439 + time = new Date().getTime(),
440 + i;
441 +
442 + for (i = -19; i <= 0; i += 1) {
443 + data.push({
444 + x: time + i * 3000,
445 + y: 0
446 + });
447 + }
448 + return data;
449 + })()
450 + }
451 + ]
452 + });
453 + </script>
454 + </body>
455 +</html>
1 +<!DOCTYPE html>
2 +<html>
3 + <head>
4 + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 + <meta name="viewport" content="width=device-width, initial-scale=1" />
6 + <title>Highcharts Example</title>
7 +
8 + <style type="text/css"></style>
9 + </head>
10 + <body>
11 + <script src="../../code/highcharts.js"></script>
12 + <script src="../../code/modules/exporting.js"></script>
13 + <script src="../../code/modules/export-data.js"></script>
14 +
15 + <div
16 + id="container"
17 + style="min-width: 310px; height: 400px; margin: 0 auto"
18 + ></div>
19 +
20 + <script type="text/javascript">
21 + var death = [3, 4, 3, 5, 4, 10, 12,1,2,3];
22 + var temp = [1, 3, 10, 3, 11, 5, 8,4,5,6];
23 +
24 + var chart = Highcharts.chart("container", {
25 + chart: {
26 + type: "areaspline"
27 + },
28 + title: {
29 + text: "실시간 사망률"
30 + },
31 + legend: {
32 + layout: "vertical",
33 + align: "left",
34 + verticalAlign: "top",
35 + x: 120,
36 + y: 70,
37 + floating: true,
38 + borderWidth: 1,
39 + backgroundColor:
40 + (Highcharts.theme && Highcharts.theme.legendBackgroundColor) ||
41 + "#FFFFFF"
42 + },
43 + xAxis: {
44 + categories: [
45 + "Monday",
46 + "Tuesday",
47 + "Wednesday",
48 + "Thursday",
49 + "Friday",
50 + "Saturday",
51 + "Sunday",
52 + "Sunday",
53 + "Sunday",
54 + "Sunday"
55 + ],
56 + plotBands: [
57 + {
58 + // 색칠되는 구간
59 + from: 7.5,
60 + to: 10.5,
61 + color: "rgba(68, 170, 213, .2)"
62 + }
63 + ]
64 + },
65 + yAxis: {
66 + title: {
67 + text: "Fruit units"
68 + }
69 + },
70 + tooltip: {
71 + shared: true,
72 + valueSuffix: " %", //point mouseover 단위
73 + },
74 + credits: {
75 + enabled: false
76 + },
77 + plotOptions: {
78 + areaspline: {
79 + fillOpacity: 0.5
80 + }
81 + },
82 + series: [
83 + {
84 + name: "사망률(%)",
85 + data: []
86 + },
87 + {
88 + name: "기온('C)",
89 + data: []
90 + }
91 + ]
92 + });
93 +
94 + death.shift();
95 + temp.shift();
96 +
97 + death.push(11);
98 + temp.push(3);
99 +
100 + chart.series[0].setData(death);
101 + chart.series[1].setData(temp);
102 +
103 + </script>
104 + </body>
105 +</html>
...\ No newline at end of file ...\ No newline at end of file
1 +<!DOCTYPE html>
2 +<html>
3 + <head>
4 + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 + <meta name="viewport" content="width=device-width, initial-scale=1" />
6 + <title>Highcharts Example</title>
7 +
8 + <style type="text/css"></style>
9 + </head>
10 + <body>
11 + <script src="../../code/highcharts.js"></script>
12 + <script src="../../code/modules/exporting.js"></script>
13 + <script src="../../code/modules/export-data.js"></script>
14 +
15 + <div
16 + id="container"
17 + style="min-width: 310px; height: 400px; margin: 0 auto"
18 + ></div>
19 +
20 + <script type="text/javascript">
21 +
22 +Highcharts.chart('container', {
23 + chart: {
24 + zoomType: 'xy'
25 + },
26 + title: {
27 + text: 'Average Monthly Temperature and Rainfall in Tokyo'
28 + },
29 + subtitle: {
30 + text: 'Source: WorldClimate.com'
31 + },
32 + xAxis: [{
33 + categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
34 + 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
35 + crosshair: true
36 + }],
37 + yAxis: [{ // Primary yAxis
38 + labels: {
39 + format: '{value}°C',
40 + style: {
41 + color: Highcharts.getOptions().colors[1]
42 + }
43 + },
44 + title: {
45 + text: 'Temperature',
46 + style: {
47 + color: Highcharts.getOptions().colors[1]
48 + }
49 + }
50 + }, { // Secondary yAxis
51 + title: {
52 + text: 'Rainfall',
53 + style: {
54 + color: Highcharts.getOptions().colors[0]
55 + }
56 + },
57 + labels: {
58 + format: '{value} mm',
59 + style: {
60 + color: Highcharts.getOptions().colors[0]
61 + }
62 + },
63 + opposite: true
64 + }],
65 + tooltip: {
66 + shared: true
67 + },
68 + legend: {
69 + layout: 'vertical',
70 + align: 'left',
71 + x: 120,
72 + verticalAlign: 'top',
73 + y: 100,
74 + floating: true,
75 + backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || 'rgba(255,255,255,0.25)'
76 + },
77 + series: [{
78 + name: 'Rainfall',
79 + type: 'areaspline',
80 + yAxis: 1,
81 + 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],
82 + tooltip: {
83 + valueSuffix: ' mm'
84 + }
85 +
86 + }, {
87 + name: 'Temperature',
88 + type: 'spline',
89 + 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],
90 + tooltip: {
91 + valueSuffix: '°C'
92 + }
93 + }]
94 +});
95 + </script>
96 + </body>
97 +</html>
...\ No newline at end of file ...\ No newline at end of file
1 -<!DOCTYPE HTML>
2 -<html>
3 - <head>
4 - <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5 - <meta name="viewport" content="width=device-width, initial-scale=1">
6 - <title>Highcharts Example</title>
7 -
8 - <style type="text/css">
9 -
10 - </style>
11 - </head>
12 - <body>
13 -<script src="../../code/highcharts.js"></script>
14 -<script src="../../code/modules/exporting.js"></script>
15 -<script src="../../code/modules/export-data.js"></script>
16 -
17 -<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
18 -
19 -
20 -
21 - <script type="text/javascript">
22 -
23 -Highcharts.chart('container', {
24 - chart: {
25 - type: 'areaspline'
26 - },
27 - title: {
28 - text: '실시간 사망률'
29 - },
30 - legend: {
31 - layout: 'vertical',
32 - align: 'left',
33 - verticalAlign: 'top',
34 - x: 150,
35 - y: 100,
36 - floating: true,
37 - borderWidth: 1,
38 - backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
39 - },
40 - xAxis: {
41 - categories: [
42 - 'Monday',
43 - 'Tuesday',
44 - 'Wednesday',
45 - 'Thursday',
46 - 'Friday',
47 - 'Saturday',
48 - 'Sunday'
49 - ],
50 - plotBands: [{ // visualize the weekend
51 - from: 4.5,
52 - to: 6.5,
53 - color: 'rgba(68, 170, 213, .2)'
54 - }]
55 - },
56 - yAxis: {
57 - title: {
58 - text: 'Fruit units'
59 - }
60 - },
61 - tooltip: {
62 - shared: true,
63 - valueSuffix: ' units'
64 - },
65 - credits: {
66 - enabled: false
67 - },
68 - plotOptions: {
69 - areaspline: {
70 - fillOpacity: 0.5
71 - }
72 - },
73 - series: [{
74 - name: '사망률',
75 - data: [3, 4, 3, 5, 4, 10, 12]
76 - }, {
77 - name: '기온',
78 - data: [1, 3, 4, 3, 3, 5, 4]
79 - }]
80 -});
81 - </script>
82 - </body>
83 -</html>
1 +<!DOCTYPE html>
2 +<html>
3 + <head>
4 + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 + <meta name="viewport" content="width=device-width, initial-scale=1" />
6 + <title>Highcharts Example</title>
7 +
8 + <style type="text/css"></style>
9 + </head>
10 + <body>
11 + <script src="../../code/highcharts.js"></script>
12 + <script src="../../code/modules/exporting.js"></script>
13 + <script src="../../code/modules/export-data.js"></script>
14 +
15 + <div
16 + id="container1"
17 + style="width:1260px; height: 400px; margin: 0 auto"
18 + ></div>
19 +
20 +<div style="width:1275px; margin:0 auto;">
21 + <div style="display: inline-block;">
22 + <div
23 + id="container2"
24 + style="width:400px; height: 300px; padding:0; margin-left:0px;margin-right: 30px;"
25 + ></div>
26 + </div>
27 + <div style="display: inline-block;">
28 + <div
29 + id="container3"
30 + style="width:400px; height: 300px; padding:0; margin-left:0px;margin-right: 30px;"
31 + ></div>
32 + </div>
33 +
34 + <div style="display: inline-block;">
35 + <div
36 + id="container4"
37 + style="width:400px; height: 300px; padding:0; margin-left:0px;"
38 + ></div>
39 + </div>
40 +
41 +</div>
42 +
43 + <script type="text/javascript">
44 + Highcharts.chart("container1", {
45 + chart: {
46 + type: "areaspline",
47 + animation: Highcharts.svg, // don't animate in old IE
48 + marginRight: 10,
49 + events: {
50 + load: function() {
51 + // set up the updating of the chart each second
52 + var series = this.series[0];
53 + setInterval(function() {
54 + var x = new Date().getTime(), // 현재 시간
55 + y = 0.7 //여기에 새로 넣을 값
56 + series.addPoint([x, y], true, true);
57 + }, 1000); //1000=1초 -> 1분=60000
58 + }
59 + }
60 + },
61 +
62 + time: {
63 + useUTC: false
64 + },
65 +
66 + title: {
67 + text: "실시간 사망률"
68 + },
69 + xAxis: {
70 + type: "datetime",
71 + tickPixelInterval: 150
72 + },
73 + yAxis: {
74 + title: {
75 + text: "Value"
76 + },
77 + plotLines: [
78 + {
79 + value: 0,
80 + width: 1,
81 + color: "#808080"
82 + }
83 + ]
84 + },
85 + tooltip: {
86 + headerFormat: "<b>{series.name}</b><br/>",
87 + pointFormat: "{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}"
88 + },
89 + legend: {
90 + //enabled: false
91 + layout: "vertical",
92 + align: "left",
93 + verticalAlign: "top",
94 + x: 120,
95 + y: 70,
96 + floating: true,
97 + borderWidth: 1,
98 + backgroundColor:
99 + (Highcharts.theme && Highcharts.theme.legendBackgroundColor) ||
100 + "#FFFFFF"
101 + },
102 + exporting: {
103 + enabled: false
104 + },
105 + series: [
106 + {
107 + name: "사망률(%)",
108 + data: (function() {
109 + // generate an array of random data
110 + var data = [],
111 + time = new Date().getTime(),
112 + i;
113 +
114 + for (i = -19; i <= 0; i += 1) {
115 + data.push({
116 + x: time + i * 1000,
117 + y: 0
118 + });
119 + }
120 + return data;
121 + })()
122 + }
123 + ]
124 + });
125 +
126 + Highcharts.chart("container2", {
127 + chart: {
128 + type: "spline",
129 + animation: Highcharts.svg, // don't animate in old IE
130 + marginRight: 10,
131 + events: {
132 + load: function() {
133 + // set up the updating of the chart each second
134 + var series = this.series[0];
135 + setInterval(function() {
136 + var x = new Date().getTime(), // 현재 시간
137 + y = Math.random(); //
138 + series.addPoint([x, y], true, true);
139 + }, 3000); //1000=1초
140 + }
141 + }
142 + },
143 +
144 + time: {
145 + useUTC: false
146 + },
147 +
148 + title: {
149 + text: "실시간 사망률"
150 + },
151 + xAxis: {
152 + type: "datetime",
153 + tickPixelInterval: 150
154 + },
155 + yAxis: {
156 + title: {
157 + text: "Value"
158 + },
159 + plotLines: [
160 + {
161 + value: 0,
162 + width: 1,
163 + color: "#808080"
164 + }
165 + ]
166 + },
167 + tooltip: {
168 + headerFormat: "<b>{series.name}</b><br/>",
169 + pointFormat: "{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}"
170 + },
171 + legend: {
172 + //enabled: false
173 + layout: "vertical",
174 + align: "left",
175 + verticalAlign: "top",
176 + x: 120,
177 + y: 70,
178 + floating: true,
179 + borderWidth: 1,
180 + backgroundColor:
181 + (Highcharts.theme && Highcharts.theme.legendBackgroundColor) ||
182 + "#FFFFFF"
183 + },
184 + exporting: {
185 + enabled: false
186 + },
187 + series: [
188 + {
189 + name: "사망률(%)",
190 + data: (function() {
191 + // generate an array of random data
192 + var data = [],
193 + time = new Date().getTime(),
194 + i;
195 +
196 + for (i = -19; i <= 0; i += 1) {
197 + data.push({
198 + x: time + i * 3000,
199 + y: 0
200 + });
201 + }
202 + return data;
203 + })()
204 + }
205 + ]
206 + });
207 +
208 + Highcharts.chart("container3", {
209 + chart: {
210 + type: "spline",
211 + animation: Highcharts.svg, // don't animate in old IE
212 + marginRight: 10,
213 + events: {
214 + load: function() {
215 + // set up the updating of the chart each second
216 + var series = this.series[0];
217 + setInterval(function() {
218 + var x = new Date().getTime(), // 현재 시간
219 + y = Math.random(); //
220 + series.addPoint([x, y], true, true);
221 + }, 3000); //1000=1초
222 + }
223 + }
224 + },
225 +
226 + time: {
227 + useUTC: false
228 + },
229 +
230 + title: {
231 + text: "실시간 사망률"
232 + },
233 + xAxis: {
234 + type: "datetime",
235 + tickPixelInterval: 150
236 + },
237 + yAxis: {
238 + title: {
239 + text: "Value"
240 + },
241 + plotLines: [
242 + {
243 + value: 0,
244 + width: 1,
245 + color: "#808080"
246 + }
247 + ]
248 + },
249 + tooltip: {
250 + headerFormat: "<b>{series.name}</b><br/>",
251 + pointFormat: "{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}"
252 + },
253 + legend: {
254 + //enabled: false
255 + layout: "vertical",
256 + align: "left",
257 + verticalAlign: "top",
258 + x: 120,
259 + y: 70,
260 + floating: true,
261 + borderWidth: 1,
262 + backgroundColor:
263 + (Highcharts.theme && Highcharts.theme.legendBackgroundColor) ||
264 + "#FFFFFF"
265 + },
266 + exporting: {
267 + enabled: false
268 + },
269 + series: [
270 + {
271 + name: "사망률(%)",
272 + data: (function() {
273 + // generate an array of random data
274 + var data = [],
275 + time = new Date().getTime(),
276 + i;
277 +
278 + for (i = -19; i <= 0; i += 1) {
279 + data.push({
280 + x: time + i * 3000,
281 + y: 0
282 + });
283 + }
284 + return data;
285 + })()
286 + }
287 + ]
288 + });
289 +
290 + Highcharts.chart("container4", {
291 + chart: {
292 + type: "spline",
293 + animation: Highcharts.svg, // don't animate in old IE
294 + marginRight: 10,
295 + events: {
296 + load: function() {
297 + // set up the updating of the chart each second
298 + var series = this.series[0];
299 + setInterval(function() {
300 + var x = new Date().getTime(), // 현재 시간
301 + y = Math.random(); //
302 + series.addPoint([x, y], true, true);
303 + }, 3000); //1000=1초
304 + }
305 + }
306 + },
307 +
308 + time: {
309 + useUTC: false
310 + },
311 +
312 + title: {
313 + text: "실시간 사망률"
314 + },
315 + xAxis: {
316 + type: "datetime",
317 + tickPixelInterval: 150
318 + },
319 + yAxis: {
320 + title: {
321 + text: "Value"
322 + },
323 + plotLines: [
324 + {
325 + value: 0,
326 + width: 1,
327 + color: "#808080"
328 + }
329 + ]
330 + },
331 + tooltip: {
332 + headerFormat: "<b>{series.name}</b><br/>",
333 + pointFormat: "{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}"
334 + },
335 + legend: {
336 + //enabled: false
337 + layout: "vertical",
338 + align: "left",
339 + verticalAlign: "top",
340 + x: 120,
341 + y: 70,
342 + floating: true,
343 + borderWidth: 1,
344 + backgroundColor:
345 + (Highcharts.theme && Highcharts.theme.legendBackgroundColor) ||
346 + "#FFFFFF"
347 + },
348 + exporting: {
349 + enabled: false
350 + },
351 + series: [
352 + {
353 + name: "사망률(%)",
354 + data: (function() {
355 + // generate an array of random data
356 + var data = [],
357 + time = new Date().getTime(),
358 + i;
359 +
360 + for (i = -19; i <= 0; i += 1) {
361 + data.push({
362 + x: time + i * 3000,
363 + y: 0
364 + });
365 + }
366 + return data;
367 + })()
368 + }
369 + ]
370 + });
371 +
372 + </script>
373 + </body>
374 +</html>
1 { 1 {
2 "weather": { 2 "weather": {
3 - "minutely": [{ 3 + "minutely": [
4 + {
4 "station": { 5 "station": {
5 "longitude": "127.1164", 6 "longitude": "127.1164",
6 "latitude": "37.2772", 7 "latitude": "37.2772",
...@@ -43,7 +44,8 @@ ...@@ -43,7 +44,8 @@
43 }, 44 },
44 "lightning": "0", 45 "lightning": "0",
45 "timeObservation": "2018-12-06 14:14:00" 46 "timeObservation": "2018-12-06 14:14:00"
46 - }] 47 + }
48 + ]
47 }, 49 },
48 "common": { 50 "common": {
49 "alertYn": "Y", 51 "alertYn": "Y",
...@@ -54,4 +56,201 @@ ...@@ -54,4 +56,201 @@
54 "requestUrl": "/weather/current/minutely?appKey=key&lat=37.239795&lon=127.083240", 56 "requestUrl": "/weather/current/minutely?appKey=key&lat=37.239795&lon=127.083240",
55 "message": "성공" 57 "message": "성공"
56 } 58 }
59 +},
60 +{
61 + "weather": {
62 + "wIndex": {
63 + "uvindex": [
64 + {
65 + "grid": {
66 + "city": "경기도",
67 + "county": "수원시",
68 + "village": ""
69 + },
70 + "day00": {
71 + "imageUrl": "http://files.weatherplanet.co.kr/weather/01_FCT/INDEX1/20181209/FCT_IDX_A07_1_2018120906_00D.gif",
72 + "index": "20.00",
73 + "comment": "자외선 걱정 없어요"
74 + },
75 + "day01": {
76 + "imageUrl": "http://files.weatherplanet.co.kr/weather/01_FCT/INDEX1/20181209/FCT_IDX_A07_1_2018120906_01D.gif",
77 + "index": "20.00",
78 + "comment": "자외선 걱정 없어요"
79 + },
80 + "day02": {
81 + "imageUrl": "http://files.weatherplanet.co.kr/weather/01_FCT/INDEX1/20181209/FCT_IDX_A07_1_2018120906_02D.gif",
82 + "index": "10.00",
83 + "comment": "자외선 없는 날입니다"
84 + }
85 + }
86 + ],
87 + "timeRelease": "2018-12-09 06:00:00"
88 + }
89 + },
90 + "common": {
91 + "alertYn": "Y",
92 + "stormYn": "N"
93 + },
94 + "result": {
95 + "code": 9200,
96 + "requestUrl": "/weather/index/uv?appKey=c13b1a68-ef31-4131-a1b7-4069c263f82d&version=1&lat=37.239795&lon=127.083240",
97 + "message": "성공"
98 + }
99 +}{
100 + "weather": {
101 + "wIndex": {
102 + "thIndex": [
103 + {
104 + "grid": {
105 + "city": "경기",
106 + "county": "용인시 기흥구",
107 + "village": "상갈동"
108 + },
109 + "forecast": {
110 + "timeRelease": "2018-12-09 14:00:00",
111 + "index43hour": "37.85",
112 + "index4hour": "38.40",
113 + "index7hour": "34.36",
114 + "index10hour": "31.08",
115 + "index13hour": "31.08",
116 + "index16hour": "27.60",
117 + "index19hour": "35.76",
118 + "index22hour": "44.84",
119 + "index25hour": "47.47",
120 + "index28hour": "42.45",
121 + "index31hour": "39.37",
122 + "index34hour": "37.85",
123 + "index37hour": "36.54",
124 + "index40hour": "35.73",
125 + "index46hour": "42.99",
126 + "index49hour": "39.12",
127 + "index52hour": "37.79",
128 + "index55hour": "37.13",
129 + "index58hour": "36.29",
130 + "index61hour": "",
131 + "index64hour": "",
132 + "index67hour": ""
133 + },
134 + "current": {
135 + "timeRelease": "2018-12-09 14:00:00",
136 + "index": "40.49"
137 + }
138 + }
139 + ]
140 + }
141 + },
142 + "common": {
143 + "alertYn": "Y",
144 + "stormYn": "N"
145 + },
146 + "result": {
147 + "code": 9200,
148 + "requestUrl": "/weather/index/th?appKey=c13b1a68-ef31-4131-a1b7-4069c263f82d&version=1&lat=37.239795&lon=127.083240",
149 + "message": "성공"
150 + }
151 +}{
152 + "weather": {
153 + "wIndex": {
154 + "heatIndex": [
155 + {
156 + "grid": {
157 + "city": "경기",
158 + "county": "용인시 기흥구",
159 + "village": "상갈동"
160 + },
161 + "forecast": {
162 + "timeRelease": "2018-12-09 14:00:00",
163 + "index4hour": "37.28",
164 + "index7hour": "70.81",
165 + "index10hour": "91.57",
166 + "index13hour": "91.57",
167 + "index16hour": "110.30",
168 + "index19hour": "71.89",
169 + "index22hour": "36.40",
170 + "index25hour": "27.82",
171 + "index28hour": "50.39",
172 + "index31hour": "61.62",
173 + "index34hour": "71.05",
174 + "index37hour": "75.20",
175 + "index40hour": "79.01",
176 + "index43hour": "71.05",
177 + "index46hour": "52.61",
178 + "index49hour": "67.96",
179 + "index52hour": "69.50",
180 + "index55hour": "69.08",
181 + "index58hour": "74.43",
182 + "index61hour": "",
183 + "index64hour": "",
184 + "index67hour": ""
185 + },
186 + "current": {
187 + "timeRelease": "2018-12-09 14:00:00",
188 + "index": "32.79"
189 + }
190 + }
191 + ]
192 + }
193 + },
194 + "common": {
195 + "alertYn": "Y",
196 + "stormYn": "N"
197 + },
198 + "result": {
199 + "code": 9200,
200 + "requestUrl": "/weather/index/heat?appKey=c13b1a68-ef31-4131-a1b7-4069c263f82d&version=1&lat=37.239795&lon=127.083240",
201 + "message": "성공"
202 + }
203 +}
204 +{
205 + "weather": {
206 + "wIndex": {
207 + "wctIndex": [
208 + {
209 + "grid": {
210 + "city": "경기",
211 + "county": "용인시 기흥구",
212 + "village": "상갈동"
213 + },
214 + "forecast": {
215 + "timeRelease": "2018-12-09 14:00:00",
216 + "index43hour": "-2.17",
217 + "index4hour": "-8.15",
218 + "index7hour": "-6.55",
219 + "index10hour": "-7.00",
220 + "index13hour": "-7.63",
221 + "index16hour": "-9.08",
222 + "index19hour": "-4.71",
223 + "index22hour": "1.18",
224 + "index25hour": "1.53",
225 + "index28hour": "-0.47",
226 + "index31hour": "-3.76",
227 + "index34hour": "-2.37",
228 + "index37hour": "-4.67",
229 + "index40hour": "-4.38",
230 + "index46hour": "-0.67",
231 + "index49hour": "-1.18",
232 + "index52hour": "-2.14",
233 + "index55hour": "-1.65",
234 + "index58hour": "-4.23",
235 + "index61hour": "",
236 + "index64hour": "",
237 + "index67hour": ""
238 + },
239 + "current": {
240 + "timeRelease": "2018-12-09 14:00:00",
241 + "index": "-6.22"
242 + }
243 + }
244 + ]
245 + }
246 + },
247 + "common": {
248 + "alertYn": "Y",
249 + "stormYn": "N"
250 + },
251 + "result": {
252 + "code": 9200,
253 + "requestUrl": "/weather/index/wct?appKey=c13b1a68-ef31-4131-a1b7-4069c263f82d&version=1&lat=37.239795&lon=127.083240",
254 + "message": "성공"
255 + }
57 } 256 }
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -21,24 +21,29 @@ module.exports = (server, app) => { ...@@ -21,24 +21,29 @@ module.exports = (server, app) => {
21 if (err) throw err; 21 if (err) throw err;
22 // api의 대답이 있을경우 실행 22 // api의 대답이 있을경우 실행
23 if (api_res) { 23 if (api_res) {
24 - console.log(api_body); 24 + return api_body;
25 // api_body.weather.minutely[0] 25 // api_body.weather.minutely[0]
26 } 26 }
27 }); 27 });
28 } 28 }
29 io.on('connection', (socket) => { //웹 페이지 연결시 루프 동작 29 io.on('connection', (socket) => { //웹 페이지 연결시 루프 동작
30 let API_CALL; 30 let API_CALL;
31 - 31 + let Current_Weather;
32 + let Sensible_T;
33 + let Heat_index;
34 + let Discomport_index;
35 + let Ultra_Violet_index;
32 36
33 socket.on("connection", () => { 37 socket.on("connection", () => {
34 API_CALL = setInterval(() => { 38 API_CALL = setInterval(() => {
35 39
36 - CALL("current","minutely"); //현재날씨 (분별) 40 + Current_Weather = CALL("current","minutely"); //현재날씨 (분별)
37 - CALL("index","wct"); //체감온도 41 + Sensible_T = CALL("index","wct"); //체감온도
38 - CALL("index","heat"); //열지수 42 + Heat_index = CALL("index","heat"); //열지수
39 - CALL("index","th"); //불쾌지수 43 + Discomport_index = CALL("index","th"); //불쾌지수
40 - CALL("index","uv"); //자외선지수 44 + Ultra_Violet_index = CALL("index","uv"); //자외선지수
41 45
46 + socket.emit("weatherInfo_minutely_send_to_cliend",info);
42 }, 60 * 1000); //1분마다 호출 47 }, 60 * 1000); //1분마다 호출
43 }); 48 });
44 49
...@@ -50,3 +55,4 @@ module.exports = (server, app) => { ...@@ -50,3 +55,4 @@ module.exports = (server, app) => {
50 55
51 56
52 } 57 }
58 +
......
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <html> 2 <html>
3 <head> 3 <head>
4 - <title><%= title %></title> 4 + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 - <link rel='stylesheet' href='/stylesheets/style.css' /> 5 + <meta name="viewport" content="width=device-width, initial-scale=1" />
6 + <title>Highcharts Example</title>
7 +
8 + <style type="text/css"></style>
6 </head> 9 </head>
7 <body> 10 <body>
8 - <h1><%= title %></h1> 11 + <script src="../code/highcharts.js"></script>
9 - <p>Welcome to <%= title %></p> 12 + <script src="../code/modules/exporting.js"></script>
13 + <script src="../code/modules/export-data.js"></script>
14 +
15 + <div
16 + id="container1"
17 + style="width:1260px; height: 400px; margin: 0 auto"
18 + ></div>
19 +
20 +<div style="width:1275px; margin:0 auto;">
21 + <div style="display: inline-block;">
22 + <div
23 + id="container2"
24 + style="width:400px; height: 300px; padding:0; margin-left:0px;margin-right: 30px;"
25 + ></div>
26 + </div>
27 + <div style="display: inline-block;">
28 + <div
29 + id="container3"
30 + style="width:400px; height: 300px; padding:0; margin-left:0px;margin-right: 30px;"
31 + ></div>
32 + </div>
33 +
34 + <div style="display: inline-block;">
35 + <div
36 + id="container4"
37 + style="width:400px; height: 300px; padding:0; margin-left:0px;"
38 + ></div>
39 + </div>
40 +
41 +</div>
42 +
43 + <script type="text/javascript">
44 + Highcharts.chart("container1", {
45 + chart: {
46 + type: "areaspline",
47 + animation: Highcharts.svg, // don't animate in old IE
48 + marginRight: 10,
49 + events: {
50 + load: function() {
51 + // set up the updating of the chart each second
52 + var series = this.series[0];
53 + setInterval(function() {
54 + var x = new Date().getTime(), // 현재 시간
55 + y = 0.7 //여기에 새로 넣을 값
56 + series.addPoint([x, y], true, true);
57 + }, 1000); //1000=1초 -> 1분=60000
58 + }
59 + }
60 + },
61 +
62 + time: {
63 + useUTC: false
64 + },
65 +
66 + title: {
67 + text: "실시간 사망률"
68 + },
69 + xAxis: {
70 + type: "datetime",
71 + tickPixelInterval: 150
72 + },
73 + yAxis: {
74 + title: {
75 + text: "Value"
76 + },
77 + plotLines: [
78 + {
79 + value: 0,
80 + width: 1,
81 + color: "#808080"
82 + }
83 + ]
84 + },
85 + tooltip: {
86 + headerFormat: "<b>{series.name}</b><br/>",
87 + pointFormat: "{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}"
88 + },
89 + legend: {
90 + //enabled: false
91 + layout: "vertical",
92 + align: "left",
93 + verticalAlign: "top",
94 + x: 120,
95 + y: 70,
96 + floating: true,
97 + borderWidth: 1,
98 + backgroundColor:
99 + (Highcharts.theme && Highcharts.theme.legendBackgroundColor) ||
100 + "#FFFFFF"
101 + },
102 + exporting: {
103 + enabled: false
104 + },
105 + series: [
106 + {
107 + name: "사망률(%)",
108 + data: (function() {
109 + // generate an array of random data
110 + var data = [],
111 + time = new Date().getTime(),
112 + i;
113 +
114 + for (i = -19; i <= 0; i += 1) {
115 + data.push({
116 + x: time + i * 1000,
117 + y: 0
118 + });
119 + }
120 + return data;
121 + })()
122 + }
123 + ]
124 + });
125 +
126 + Highcharts.chart("container2", {
127 + chart: {
128 + type: "spline",
129 + animation: Highcharts.svg, // don't animate in old IE
130 + marginRight: 10,
131 + events: {
132 + load: function() {
133 + // set up the updating of the chart each second
134 + var series = this.series[0];
135 + setInterval(function() {
136 + var x = new Date().getTime(), // 현재 시간
137 + y = Math.random(); //
138 + series.addPoint([x, y], true, true);
139 + }, 3000); //1000=1초
140 + }
141 + }
142 + },
143 +
144 + time: {
145 + useUTC: false
146 + },
147 +
148 + title: {
149 + text: "실시간 사망률"
150 + },
151 + xAxis: {
152 + type: "datetime",
153 + tickPixelInterval: 150
154 + },
155 + yAxis: {
156 + title: {
157 + text: "Value"
158 + },
159 + plotLines: [
160 + {
161 + value: 0,
162 + width: 1,
163 + color: "#808080"
164 + }
165 + ]
166 + },
167 + tooltip: {
168 + headerFormat: "<b>{series.name}</b><br/>",
169 + pointFormat: "{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}"
170 + },
171 + legend: {
172 + //enabled: false
173 + layout: "vertical",
174 + align: "left",
175 + verticalAlign: "top",
176 + x: 120,
177 + y: 70,
178 + floating: true,
179 + borderWidth: 1,
180 + backgroundColor:
181 + (Highcharts.theme && Highcharts.theme.legendBackgroundColor) ||
182 + "#FFFFFF"
183 + },
184 + exporting: {
185 + enabled: false
186 + },
187 + series: [
188 + {
189 + name: "사망률(%)",
190 + data: (function() {
191 + // generate an array of random data
192 + var data = [],
193 + time = new Date().getTime(),
194 + i;
195 +
196 + for (i = -19; i <= 0; i += 1) {
197 + data.push({
198 + x: time + i * 3000,
199 + y: 0
200 + });
201 + }
202 + return data;
203 + })()
204 + }
205 + ]
206 + });
207 +
208 + Highcharts.chart("container3", {
209 + chart: {
210 + type: "spline",
211 + animation: Highcharts.svg, // don't animate in old IE
212 + marginRight: 10,
213 + events: {
214 + load: function() {
215 + // set up the updating of the chart each second
216 + var series = this.series[0];
217 + setInterval(function() {
218 + var x = new Date().getTime(), // 현재 시간
219 + y = Math.random(); //
220 + series.addPoint([x, y], true, true);
221 + }, 3000); //1000=1초
222 + }
223 + }
224 + },
225 +
226 + time: {
227 + useUTC: false
228 + },
229 +
230 + title: {
231 + text: "실시간 사망률"
232 + },
233 + xAxis: {
234 + type: "datetime",
235 + tickPixelInterval: 150
236 + },
237 + yAxis: {
238 + title: {
239 + text: "Value"
240 + },
241 + plotLines: [
242 + {
243 + value: 0,
244 + width: 1,
245 + color: "#808080"
246 + }
247 + ]
248 + },
249 + tooltip: {
250 + headerFormat: "<b>{series.name}</b><br/>",
251 + pointFormat: "{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}"
252 + },
253 + legend: {
254 + //enabled: false
255 + layout: "vertical",
256 + align: "left",
257 + verticalAlign: "top",
258 + x: 120,
259 + y: 70,
260 + floating: true,
261 + borderWidth: 1,
262 + backgroundColor:
263 + (Highcharts.theme && Highcharts.theme.legendBackgroundColor) ||
264 + "#FFFFFF"
265 + },
266 + exporting: {
267 + enabled: false
268 + },
269 + series: [
270 + {
271 + name: "사망률(%)",
272 + data: (function() {
273 + // generate an array of random data
274 + var data = [],
275 + time = new Date().getTime(),
276 + i;
277 +
278 + for (i = -19; i <= 0; i += 1) {
279 + data.push({
280 + x: time + i * 3000,
281 + y: 0
282 + });
283 + }
284 + return data;
285 + })()
286 + }
287 + ]
288 + });
289 +
290 + Highcharts.chart("container4", {
291 + chart: {
292 + type: "spline",
293 + animation: Highcharts.svg, // don't animate in old IE
294 + marginRight: 10,
295 + events: {
296 + load: function() {
297 + // set up the updating of the chart each second
298 + var series = this.series[0];
299 + setInterval(function() {
300 + var x = new Date().getTime(), // 현재 시간
301 + y = Math.random(); //
302 + series.addPoint([x, y], true, true);
303 + }, 3000); //1000=1초
304 + }
305 + }
306 + },
307 +
308 + time: {
309 + useUTC: false
310 + },
311 +
312 + title: {
313 + text: "실시간 사망률"
314 + },
315 + xAxis: {
316 + type: "datetime",
317 + tickPixelInterval: 150
318 + },
319 + yAxis: {
320 + title: {
321 + text: "Value"
322 + },
323 + plotLines: [
324 + {
325 + value: 0,
326 + width: 1,
327 + color: "#808080"
328 + }
329 + ]
330 + },
331 + tooltip: {
332 + headerFormat: "<b>{series.name}</b><br/>",
333 + pointFormat: "{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}"
334 + },
335 + legend: {
336 + //enabled: false
337 + layout: "vertical",
338 + align: "left",
339 + verticalAlign: "top",
340 + x: 120,
341 + y: 70,
342 + floating: true,
343 + borderWidth: 1,
344 + backgroundColor:
345 + (Highcharts.theme && Highcharts.theme.legendBackgroundColor) ||
346 + "#FFFFFF"
347 + },
348 + exporting: {
349 + enabled: false
350 + },
351 + series: [
352 + {
353 + name: "사망률(%)",
354 + data: (function() {
355 + // generate an array of random data
356 + var data = [],
357 + time = new Date().getTime(),
358 + i;
359 +
360 + for (i = -19; i <= 0; i += 1) {
361 + data.push({
362 + x: time + i * 3000,
363 + y: 0
364 + });
365 + }
366 + return data;
367 + })()
368 + }
369 + ]
370 + });
371 +
372 + </script>
10 </body> 373 </body>
11 </html> 374 </html>
......