index.htm 1.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869
  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: 300px;
  10. max-width: 600px;
  11. margin: 0 auto;
  12. }
  13. </style>
  14. </head>
  15. <body>
  16. <script src="../../code/highcharts.js"></script>
  17. <script src="../../code/modules/heatmap.js"></script>
  18. <script src="../../code/modules/treemap.js"></script>
  19. <div id="container"></div>
  20. <script type="text/javascript">
  21. Highcharts.chart('container', {
  22. colorAxis: {
  23. minColor: '#FFFFFF',
  24. maxColor: Highcharts.getOptions().colors[0]
  25. },
  26. series: [{
  27. type: 'treemap',
  28. layoutAlgorithm: 'squarified',
  29. data: [{
  30. name: 'A',
  31. value: 6,
  32. colorValue: 1
  33. }, {
  34. name: 'B',
  35. value: 6,
  36. colorValue: 2
  37. }, {
  38. name: 'C',
  39. value: 4,
  40. colorValue: 3
  41. }, {
  42. name: 'D',
  43. value: 3,
  44. colorValue: 4
  45. }, {
  46. name: 'E',
  47. value: 2,
  48. colorValue: 5
  49. }, {
  50. name: 'F',
  51. value: 2,
  52. colorValue: 6
  53. }, {
  54. name: 'G',
  55. value: 1,
  56. colorValue: 7
  57. }]
  58. }],
  59. title: {
  60. text: 'Highcharts Treemap'
  61. }
  62. });
  63. </script>
  64. </body>
  65. </html>