조민지

y축이 두개인 그래프

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: 'spline',
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