123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778 |
- <!DOCTYPE HTML>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>Highcharts Example</title>
- <style type="text/css">
- #container {
- min-width: 300px;
- max-width: 800px;
- height: 500px;
- margin: 1em auto;
- }
- </style>
- </head>
- <body>
- <script src="../../code/highcharts.js"></script>
- <script src="../../code/modules/variable-pie.js"></script>
- <div id="container"></div>
- <script type="text/javascript">
- Highcharts.chart('container', {
- chart: {
- type: 'variablepie'
- },
- title: {
- text: 'Countries compared by population density and total area.'
- },
- tooltip: {
- headerFormat: '',
- pointFormat: '<span style="color:{point.color}">\u25CF</span> <b> {point.name}</b><br/>' +
- 'Area (square km): <b>{point.y}</b><br/>' +
- 'Population density (people per square km): <b>{point.z}</b><br/>'
- },
- series: [{
- minPointSize: 10,
- innerSize: '20%',
- zMin: 0,
- name: 'countries',
- data: [{
- name: 'Spain',
- y: 505370,
- z: 92.9
- }, {
- name: 'France',
- y: 551500,
- z: 118.7
- }, {
- name: 'Poland',
- y: 312685,
- z: 124.6
- }, {
- name: 'Czech Republic',
- y: 78867,
- z: 137.5
- }, {
- name: 'Italy',
- y: 301340,
- z: 201.8
- }, {
- name: 'Switzerland',
- y: 41277,
- z: 214.5
- }, {
- name: 'Germany',
- y: 357022,
- z: 235.6
- }]
- }]
- });
- </script>
- </body>
- </html>
|