| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576 |
- <!DOCTYPE HTML>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <title>Highmaps Example</title>
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
- <style type="text/css">
- ${demo.css}
- </style>
- <script type="text/javascript">
- $(function () {
- // Instanciate the map
- $('#container').highcharts('Map', {
- chart : {
- borderWidth : 1
- },
- title : {
- text : 'Nordic countries'
- },
- subtitle : {
- text : 'Demo of drawing all areas in the map, only highlighting partial data'
- },
- legend: {
- enabled: false
- },
- series : [{
- name: 'Country',
- mapData: Highcharts.maps['custom/europe'],
- data: [{
- code: 'IS',
- value: 1
- }, {
- code: 'NO',
- value: 1
- }, {
- code: 'SE',
- value: 1
- }, {
- code: 'FI',
- value: 1
- }, {
- code: 'DK',
- value: 1
- }],
- joinBy: ['iso-a2', 'code'],
- dataLabels: {
- enabled: true,
- color: 'white',
- formatter: function () {
- if (this.point.value) {
- return this.point.name;
- }
- }
- },
- tooltip: {
- headerFormat: '',
- pointFormat: '{point.name}'
- }
- }]
- });
- });
- </script>
- </head>
- <body>
- <script src="../../js/highmaps.js"></script>
- <script src="http://code.highcharts.com/mapdata/custom/europe.js"></script>
- <div id="container" style="height: 500px; min-width: 310px; max-width: 600px; margin: 0 auto"></div>
- </body>
- </html>
|
