Showing
3 changed files
with
55 additions
and
39 deletions
This diff could not be displayed because it is too large.
This diff is collapsed. Click to expand it.
1 | -<!DOCTYPE HTML> | 1 | +<!DOCTYPE html> |
2 | <html> | 2 | <html> |
3 | <head> | 3 | <head> |
4 | - <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | 4 | + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
5 | - <meta name="viewport" content="width=device-width, initial-scale=1"> | 5 | + <meta name="viewport" content="width=device-width, initial-scale=1" /> |
6 | <title>Highcharts Example</title> | 6 | <title>Highcharts Example</title> |
7 | 7 | ||
8 | - <style type="text/css"> | 8 | + <style type="text/css"></style> |
9 | - | ||
10 | - </style> | ||
11 | </head> | 9 | </head> |
12 | <body> | 10 | <body> |
13 | -<script src="../../code/highcharts.js"></script> | 11 | + <script src="../../code/highcharts.js"></script> |
14 | -<script src="../../code/modules/exporting.js"></script> | 12 | + <script src="../../code/modules/exporting.js"></script> |
15 | -<script src="../../code/modules/export-data.js"></script> | 13 | + <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 | 14 | ||
15 | + <div | ||
16 | + id="container" | ||
17 | + style="min-width: 310px; height: 400px; margin: 0 auto" | ||
18 | + ></div> | ||
20 | 19 | ||
21 | <script type="text/javascript"> | 20 | <script type="text/javascript"> |
21 | + var death = [3, 4, 3, 5, 4, 10, 12]; | ||
22 | + var temp = [1, 3, 10, 3, 11, 5, 8]; | ||
22 | 23 | ||
23 | -Highcharts.chart('container', { | 24 | + var chart = Highcharts.chart("container", { |
24 | chart: { | 25 | chart: { |
25 | - type: 'areaspline' | 26 | + type: "areaspline" |
26 | }, | 27 | }, |
27 | title: { | 28 | title: { |
28 | - text: '실시간 사망률' | 29 | + text: "실시간 사망률" |
29 | }, | 30 | }, |
30 | legend: { | 31 | legend: { |
31 | - layout: 'vertical', | 32 | + layout: "vertical", |
32 | - align: 'left', | 33 | + align: "left", |
33 | - verticalAlign: 'top', | 34 | + verticalAlign: "top", |
34 | x: 150, | 35 | x: 150, |
35 | y: 100, | 36 | y: 100, |
36 | floating: true, | 37 | floating: true, |
37 | borderWidth: 1, | 38 | borderWidth: 1, |
38 | - backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF' | 39 | + backgroundColor: |
40 | + (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || | ||
41 | + "#FFFFFF" | ||
39 | }, | 42 | }, |
40 | xAxis: { | 43 | xAxis: { |
41 | categories: [ | 44 | categories: [ |
42 | - 'Monday', | 45 | + "Monday", |
43 | - 'Tuesday', | 46 | + "Tuesday", |
44 | - 'Wednesday', | 47 | + "Wednesday", |
45 | - 'Thursday', | 48 | + "Thursday", |
46 | - 'Friday', | 49 | + "Friday", |
47 | - 'Saturday', | 50 | + "Saturday", |
48 | - 'Sunday' | 51 | + "Sunday" |
49 | ], | 52 | ], |
50 | - plotBands: [{ // visualize the weekend | 53 | + plotBands: [ |
54 | + { | ||
55 | + // 색칠되는 구간 | ||
51 | from: 4.5, | 56 | from: 4.5, |
52 | to: 6.5, | 57 | to: 6.5, |
53 | - color: 'rgba(68, 170, 213, .2)' | 58 | + color: "rgba(68, 170, 213, .2)" |
54 | - }] | 59 | + } |
60 | + ] | ||
55 | }, | 61 | }, |
56 | yAxis: { | 62 | yAxis: { |
57 | title: { | 63 | title: { |
58 | - text: 'Fruit units' | 64 | + text: "Fruit units" |
59 | } | 65 | } |
60 | }, | 66 | }, |
61 | tooltip: { | 67 | tooltip: { |
62 | - shared: true, | 68 | + shared: false, |
63 | - valueSuffix: ' units' | 69 | + valueSuffix: " %", //point mouseover 단위 |
64 | }, | 70 | }, |
65 | credits: { | 71 | credits: { |
66 | enabled: false | 72 | enabled: false |
... | @@ -70,14 +76,24 @@ Highcharts.chart('container', { | ... | @@ -70,14 +76,24 @@ Highcharts.chart('container', { |
70 | fillOpacity: 0.5 | 76 | fillOpacity: 0.5 |
71 | } | 77 | } |
72 | }, | 78 | }, |
73 | - series: [{ | 79 | + series: [ |
74 | - name: '사망률', | 80 | + { |
81 | + name: "사망률", | ||
75 | data: [3, 4, 3, 5, 4, 10, 12] | 82 | data: [3, 4, 3, 5, 4, 10, 12] |
76 | - }, { | 83 | + }, |
77 | - name: '기온', | 84 | + { |
78 | - data: [1, 3, 4, 3, 3, 5, 4] | 85 | + name: "기온", |
79 | - }] | 86 | + data: [1, 3, 10, 3, 3, 5, 4] |
80 | -}); | 87 | + } |
88 | + ] | ||
89 | + }); | ||
90 | + | ||
91 | + death.push(11); | ||
92 | + temp.push(3); | ||
93 | + | ||
94 | + chart.series[0].setData(death); | ||
95 | + chart.series[1].setData(temp); | ||
96 | + | ||
81 | </script> | 97 | </script> |
82 | </body> | 98 | </body> |
83 | </html> | 99 | </html> |
... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
-
Please register or login to post a comment