kkl / Probability Death

Go to a project
Toggle navigation Toggle navigation pinning
조민지
7c8168b3 1 parent dc48e761

차트에 push/pop 가능

Expand all
Inline Side-by-side
Showing 3 changed files with 91 additions and 75 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 + </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>
9 14
10 - </style> 15 + <div
11 - </head> 16 + id="container"
12 - <body> 17 + style="min-width: 310px; height: 400px; margin: 0 auto"
13 -<script src="../../code/highcharts.js"></script> 18 + ></div>
14 -<script src="../../code/modules/exporting.js"></script>
15 -<script src="../../code/modules/export-data.js"></script>
16 19
17 -<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> 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];
18 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: 150,
36 + y: 100,
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 + ],
53 + plotBands: [
54 + {
55 + // 색칠되는 구간
56 + from: 4.5,
57 + to: 6.5,
58 + color: "rgba(68, 170, 213, .2)"
59 + }
60 + ]
61 + },
62 + yAxis: {
63 + title: {
64 + text: "Fruit units"
65 + }
66 + },
67 + tooltip: {
68 + shared: false,
69 + valueSuffix: " %", //point mouseover 단위
70 + },
71 + credits: {
72 + enabled: false
73 + },
74 + plotOptions: {
75 + areaspline: {
76 + fillOpacity: 0.5
77 + }
78 + },
79 + series: [
80 + {
81 + name: "사망률",
82 + data: [3, 4, 3, 5, 4, 10, 12]
83 + },
84 + {
85 + name: "기온",
86 + data: [1, 3, 10, 3, 3, 5, 4]
87 + }
88 + ]
89 + });
19 90
91 + death.push(11);
92 + temp.push(3);
20 93
21 - <script type="text/javascript"> 94 + chart.series[0].setData(death);
95 + chart.series[1].setData(temp);
22 96
23 -Highcharts.chart('container', { 97 + </script>
24 - chart: { 98 + </body>
25 - type: 'areaspline' 99 +</html>
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>
...\ No newline at end of file ...\ No newline at end of file
......