index.htm 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  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. <style type="text/css">
  8. #container {
  9. min-width: 320px;
  10. max-width: 600px;
  11. height: 400px;
  12. margin: 0 auto;
  13. }
  14. </style>
  15. </head>
  16. <body>
  17. <script src="../../code/highcharts.js"></script>
  18. <script src="../../code/modules/venn.js"></script>
  19. <script src="../../code/modules/exporting.js"></script>
  20. <div id="container"></div>
  21. <script type="text/javascript">
  22. Highcharts.chart('container', {
  23. series: [{
  24. type: 'venn',
  25. name: 'The Unattainable Triangle',
  26. data: [{
  27. sets: ['Good'],
  28. value: 2
  29. }, {
  30. sets: ['Fast'],
  31. value: 2
  32. }, {
  33. sets: ['Cheap'],
  34. value: 2
  35. }, {
  36. sets: ['Good', 'Fast'],
  37. value: 1,
  38. name: 'More expensive'
  39. }, {
  40. sets: ['Good', 'Cheap'],
  41. value: 1,
  42. name: 'Will take time to deliver'
  43. }, {
  44. sets: ['Fast', 'Cheap'],
  45. value: 1,
  46. name: 'Not the best quality'
  47. }, {
  48. sets: ['Fast', 'Cheap', 'Good'],
  49. value: 1,
  50. name: 'They\'re dreaming'
  51. }]
  52. }],
  53. title: {
  54. text: 'The Unattainable Triangle'
  55. }
  56. });
  57. </script>
  58. </body>
  59. </html>