| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263 |
- <!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: 320px;
- max-width: 600px;
- height: 400px;
- margin: 0 auto;
- }
- </style>
- </head>
- <body>
- <script src="../../code/highcharts.js"></script>
- <script src="../../code/modules/venn.js"></script>
- <script src="../../code/modules/exporting.js"></script>
- <div id="container"></div>
- <script type="text/javascript">
- Highcharts.chart('container', {
- series: [{
- type: 'venn',
- data: [{
- sets: ['A'],
- value: 4,
- name: 'Euler diagrams',
- description: 'An Euler diagram is a diagrammatic means of representing sets and their' +
- 'relationships. Unlike Venn diagrams, which show all possible relations' +
- 'between different sets, the Euler diagram shows only relevant' +
- 'relationships.'
- }, {
- sets: ['B'],
- value: 1,
- name: 'Venn diagrams',
- description: 'In Venn diagrams the curves are overlapped in every possible way,' +
- 'showing all possible relations between the sets. They are thus a' +
- 'special case of Euler diagrams, which do not necessarily show all' +
- 'relations'
- }, {
- sets: ['A', 'B'],
- value: 1
- }]
- }],
- tooltip: {
- headerFormat:
- '<span style="color:{point.color}">\u2022</span> ' +
- '<span style="font-size: 14px"> {point.point.name}</span><br/>',
- pointFormat: '{point.description}<br><span style="font-size: 10px">Source: Wikipedia</span>'
- },
- title: {
- text: 'Relationship between Euler and Venn diagrams'
- }
- });
- </script>
- </body>
- </html>
|
