xy.html 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  4. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6. <!-- AmCharts includes -->
  7. <script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
  8. <script src="http://www.amcharts.com/lib/3/xy.js"></script>
  9. <!-- Export plugin includes and styles -->
  10. <script src="../export.js"></script>
  11. <link type="text/css" href="../export.css" rel="stylesheet">
  12. <style>
  13. body, html {
  14. height: 100%;
  15. padding: 0;
  16. margin: 0;
  17. overflow: hidden;
  18. font-size: 11px;
  19. font-family: Verdana;
  20. }
  21. #chartdiv {
  22. width: 100%;
  23. height: 100%;
  24. }
  25. </style>
  26. <script type="text/javascript">
  27. var chart = AmCharts.makeChart( "chartdiv", {
  28. "type": "xy",
  29. "marginTop": 25,
  30. "startDuration": 1.5,
  31. "trendLines": [],
  32. "graphs": [ {
  33. "title": "Diamonds",
  34. "balloonText": "x:<b>[[x]]</b> y:<b>[[y]]</b><br>value:<b>[[value]]</b>",
  35. "bullet": "diamond",
  36. "id": "AmGraph-1",
  37. "lineAlpha": 0,
  38. "lineColor": "#b0de09",
  39. "valueField": "value",
  40. "xField": "x",
  41. "yField": "y"
  42. }, {
  43. "title": "Balls",
  44. "balloonText": "x:<b>[[x]]</b> y:<b>[[y]]</b><br>value:<b>[[value]]</b>",
  45. "bullet": "round",
  46. "id": "AmGraph-2",
  47. "lineAlpha": 0,
  48. "lineColor": "#fcd202",
  49. "valueField": "value2",
  50. "xField": "x2",
  51. "yField": "y2"
  52. } ],
  53. "guides": [ {
  54. "fillAlpha": 0.3,
  55. "fillColor": "#ff8000",
  56. "id": "Guide-1",
  57. "toValue": -2,
  58. "value": -8,
  59. "valueAxis": "ValueAxis-2"
  60. } ],
  61. "valueAxes": [ {
  62. "id": "ValueAxis-1",
  63. "axisAlpha": 0
  64. }, {
  65. "id": "ValueAxis-2",
  66. "axisAlpha": 0,
  67. "position": "bottom"
  68. } ],
  69. "allLabels": [],
  70. "balloon": {},
  71. "titles": [],
  72. "dataProvider": [ {
  73. "y": 10,
  74. "x": 14,
  75. "value": 59,
  76. "y2": -5,
  77. "x2": -3,
  78. "value2": 44
  79. }, {
  80. "y": 5,
  81. "x": 3,
  82. "value": 50,
  83. "y2": -15,
  84. "x2": -8,
  85. "value2": 12
  86. }, {
  87. "y": -10,
  88. "x": -3,
  89. "value": 19,
  90. "y2": -4,
  91. "x2": 6,
  92. "value2": 35
  93. }, {
  94. "y": -6,
  95. "x": 5,
  96. "value": 65,
  97. "y2": -5,
  98. "x2": -6,
  99. "value2": 168
  100. }, {
  101. "y": 15,
  102. "x": -4,
  103. "value": 92,
  104. "y2": -10,
  105. "x2": -8,
  106. "value2": 102
  107. }, {
  108. "y": 13,
  109. "x": 1,
  110. "value": 8,
  111. "y2": -2,
  112. "x2": -3,
  113. "value2": 41
  114. }, {
  115. "y": 1,
  116. "x": 6,
  117. "value": 35,
  118. "y2": 0,
  119. "x2": -3,
  120. "value2": 16
  121. } ],
  122. "chartCursor": {},
  123. "legend": {
  124. "position": "bottom"
  125. },
  126. "export": {
  127. "enabled": true
  128. }
  129. } );
  130. </script>
  131. </head>
  132. <body>
  133. <div id="chartdiv"></div>
  134. </body>
  135. </html>