index.htm 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  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. max-width: 800px;
  10. height: 400px;
  11. margin: 1em auto;
  12. }
  13. </style>
  14. </head>
  15. <body>
  16. <script src="../../code/highcharts.js"></script>
  17. <script src="../../code/modules/histogram-bellcurve.js"></script>
  18. <div id="container"></div>
  19. <script type="text/javascript">
  20. var data = [3.5, 3, 3.2, 3.1, 3.6, 3.9, 3.4, 3.4, 2.9, 3.1, 3.7, 3.4, 3, 3, 4, 4.4, 3.9, 3.5, 3.8, 3.8, 3.4, 3.7, 3.6, 3.3, 3.4, 3, 3.4, 3.5, 3.4, 3.2, 3.1, 3.4, 4.1, 4.2, 3.1, 3.2, 3.5, 3.6, 3, 3.4, 3.5, 2.3, 3.2, 3.5, 3.8, 3, 3.8, 3.2, 3.7, 3.3, 3.2, 3.2, 3.1, 2.3, 2.8, 2.8, 3.3, 2.4, 2.9, 2.7, 2, 3, 2.2, 2.9, 2.9, 3.1, 3, 2.7, 2.2, 2.5, 3.2, 2.8, 2.5, 2.8, 2.9, 3, 2.8, 3, 2.9, 2.6, 2.4, 2.4, 2.7, 2.7, 3, 3.4, 3.1, 2.3, 3, 2.5, 2.6, 3, 2.6, 2.3, 2.7, 3, 2.9, 2.9, 2.5, 2.8, 3.3, 2.7, 3, 2.9, 3, 3, 2.5, 2.9, 2.5, 3.6, 3.2, 2.7, 3, 2.5, 2.8, 3.2, 3, 3.8, 2.6, 2.2, 3.2, 2.8, 2.8, 2.7, 3.3, 3.2, 2.8, 3, 2.8, 3, 2.8, 3.8, 2.8, 2.8, 2.6, 3, 3.4, 3.1, 3, 3.1, 3.1, 3.1, 2.7, 3.2, 3.3, 3, 2.5, 3, 3.4, 3];
  21. Highcharts.chart('container', {
  22. title: {
  23. text: 'Highcharts Histogram'
  24. },
  25. xAxis: [{
  26. title: { text: 'Data' },
  27. alignTicks: false
  28. }, {
  29. title: { text: 'Histogram' },
  30. alignTicks: false,
  31. opposite: true
  32. }],
  33. yAxis: [{
  34. title: { text: 'Data' }
  35. }, {
  36. title: { text: 'Histogram' },
  37. opposite: true
  38. }],
  39. series: [{
  40. name: 'Histogram',
  41. type: 'histogram',
  42. xAxis: 1,
  43. yAxis: 1,
  44. baseSeries: 's1',
  45. zIndex: -1
  46. }, {
  47. name: 'Data',
  48. type: 'scatter',
  49. data: data,
  50. id: 's1',
  51. marker: {
  52. radius: 1.5
  53. }
  54. }]
  55. });
  56. </script>
  57. </body>
  58. </html>