Showing
1 changed file
with
97 additions
and
0 deletions
graph/areaspline/dual_graph.html
0 → 100644
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 |
-
Please register or login to post a comment