You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

89 lines
2.3 KiB

9 years ago
  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. <style type="text/css">
  8. ${demo.css}
  9. </style>
  10. <script type="text/javascript">
  11. $(function () {
  12. $('#container').highcharts({
  13. chart: {
  14. type: 'scatter',
  15. margin: [70, 50, 60, 80],
  16. events: {
  17. click: function (e) {
  18. // find the clicked values and the series
  19. var x = e.xAxis[0].value,
  20. y = e.yAxis[0].value,
  21. series = this.series[0];
  22. // Add it
  23. series.addPoint([x, y]);
  24. }
  25. }
  26. },
  27. title: {
  28. text: 'User supplied data'
  29. },
  30. subtitle: {
  31. text: 'Click the plot area to add a point. Click a point to remove it.'
  32. },
  33. xAxis: {
  34. gridLineWidth: 1,
  35. minPadding: 0.2,
  36. maxPadding: 0.2,
  37. maxZoom: 60
  38. },
  39. yAxis: {
  40. title: {
  41. text: 'Value'
  42. },
  43. minPadding: 0.2,
  44. maxPadding: 0.2,
  45. maxZoom: 60,
  46. plotLines: [{
  47. value: 0,
  48. width: 1,
  49. color: '#808080'
  50. }]
  51. },
  52. legend: {
  53. enabled: false
  54. },
  55. exporting: {
  56. enabled: false
  57. },
  58. plotOptions: {
  59. series: {
  60. lineWidth: 1,
  61. point: {
  62. events: {
  63. 'click': function () {
  64. if (this.series.data.length > 1) {
  65. this.remove();
  66. }
  67. }
  68. }
  69. }
  70. }
  71. },
  72. series: [{
  73. data: [[20, 20], [80, 80]]
  74. }]
  75. });
  76. });
  77. </script>
  78. </head>
  79. <body>
  80. <script src="../../js/highcharts.js"></script>
  81. <script src="../../js/modules/exporting.js"></script>
  82. <div id="container" style="min-width: 310px; height: 400px; max-width: 700px; margin: 0 auto"></div>
  83. </body>
  84. </html>