index.htm 2.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>Highcharts Example</title>
  6. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
  7. <script type="text/javascript">
  8. $(function() {
  9. $('#container').highcharts({
  10. chart: {
  11. type: 'bubble',
  12. plotBorderWidth: 1,
  13. zoomType: 'xy'
  14. },
  15. title: {
  16. text: 'Highcharts bubbles with radial gradient fill'
  17. },
  18. xAxis: {
  19. gridLineWidth: 1
  20. },
  21. yAxis: {
  22. startOnTick: false,
  23. endOnTick: false
  24. },
  25. series: [{
  26. data: [
  27. [9, 81, 63],
  28. [98, 5, 89],
  29. [51, 50, 73],
  30. [41, 22, 14],
  31. [58, 24, 20],
  32. [78, 37, 34],
  33. [55, 56, 53],
  34. [18, 45, 70],
  35. [42, 44, 28],
  36. [3, 52, 59],
  37. [31, 18, 97],
  38. [79, 91, 63],
  39. [93, 23, 23],
  40. [44, 83, 22]
  41. ],
  42. marker: {
  43. fillColor: {
  44. radialGradient: { cx: 0.4, cy: 0.3, r: 0.7 },
  45. stops: [
  46. [0, 'rgba(255,255,255,0.5)'],
  47. [1, 'rgba(69,114,167,0.5)']
  48. ]
  49. }
  50. }
  51. }, {
  52. data: [
  53. [42, 38, 20],
  54. [6, 18, 1],
  55. [1, 93, 55],
  56. [57, 2, 90],
  57. [80, 76, 22],
  58. [11, 74, 96],
  59. [88, 56, 10],
  60. [30, 47, 49],
  61. [57, 62, 98],
  62. [4, 16, 16],
  63. [46, 10, 11],
  64. [22, 87, 89],
  65. [57, 91, 82],
  66. [45, 15, 98]
  67. ],
  68. marker: {
  69. fillColor: {
  70. radialGradient: { cx: 0.4, cy: 0.3, r: 0.7 },
  71. stops: [
  72. [0, 'rgba(255,255,255,0.5)'],
  73. [1, 'rgba(170,70,67,0.5)']
  74. ]
  75. }
  76. }
  77. }]
  78. });
  79. });
  80. </script>
  81. </head>
  82. <body>
  83. <script src="../../js/highcharts.js"></script>
  84. <script src="../../js/highcharts-more.js"></script>
  85. <div id="container" style="min-width: 310px; max-width: 600px; height: 400px; margin: 0 auto;"></div>
  86. </body>
  87. </html>