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 | ... | ... |
-
Please register or login to post a comment