1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
| <!DOCTYPE HTML>
| <html>
| <head>
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
| <title>Highcharts Example</title>
|
| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
| <script type="text/javascript">
| $(function () {
| $('#container').highcharts({
| chart: {
| type: 'area'
| },
| title: {
| text: 'Historic and Estimated Worldwide Population Distribution by Region'
| },
| subtitle: {
| text: 'Source: Wikipedia.org'
| },
| xAxis: {
| categories: ['1750', '1800', '1850', '1900', '1950', '1999', '2050'],
| tickmarkPlacement: 'on',
| title: {
| enabled: false
| }
| },
| yAxis: {
| title: {
| text: 'Percent'
| }
| },
| tooltip: {
| pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.percentage:.1f}%</b> ({point.y:,.0f} millions)<br/>',
| shared: true
| },
| plotOptions: {
| area: {
| stacking: 'percent',
| lineColor: '#ffffff',
| lineWidth: 1,
| marker: {
| lineWidth: 1,
| lineColor: '#ffffff'
| }
| }
| },
| series: [{
| name: 'Asia',
| data: [502, 635, 809, 947, 1402, 3634, 5268]
| }, {
| name: 'Africa',
| data: [106, 107, 111, 133, 221, 767, 1766]
| }, {
| name: 'Europe',
| data: [163, 203, 276, 408, 547, 729, 628]
| }, {
| name: 'America',
| data: [18, 31, 54, 156, 339, 818, 1201]
| }, {
| name: 'Oceania',
| data: [2, 2, 2, 6, 13, 30, 46]
| }]
| });
| });
|
|
| </script>
| </head>
| <body>
| <script src="../../js/highcharts.js"></script>
| <script src="../../js/modules/exporting.js"></script>
|
| <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
|
| </body>
| </html>
|
|
