xy.html 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  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, maximum-scale=1">
  6. <title>amCharts Responsive Example</title>
  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. <script src="../responsive.min.js"></script>
  10. <style>
  11. body, html {
  12. height: 100%;
  13. padding: 0;
  14. margin: 0;
  15. }
  16. </style>
  17. <script>
  18. var chart = AmCharts.makeChart("chartdiv", {
  19. "type": "xy",
  20. "startDuration": 1.5,
  21. "trendLines": [],
  22. "graphs": [
  23. {
  24. "title": "Diamonds",
  25. "balloonText": "x:<b>[[x]]</b> y:<b>[[y]]</b><br>value:<b>[[value]]</b>",
  26. "bullet": "diamond",
  27. "id": "AmGraph-1",
  28. "lineAlpha": 0,
  29. "lineColor": "#b0de09",
  30. "valueField": "value",
  31. "xField": "x",
  32. "yField": "y"
  33. },
  34. {
  35. "title": "Balls",
  36. "balloonText": "x:<b>[[x]]</b> y:<b>[[y]]</b><br>value:<b>[[value]]</b>",
  37. "bullet": "round",
  38. "id": "AmGraph-2",
  39. "lineAlpha": 0,
  40. "lineColor": "#fcd202",
  41. "valueField": "value2",
  42. "xField": "x2",
  43. "yField": "y2"
  44. }
  45. ],
  46. "guides": [
  47. {
  48. "fillAlpha": 0.3,
  49. "fillColor": "#ff8000",
  50. "id": "Guide-1",
  51. "toValue": -2,
  52. "value": -8,
  53. "valueAxis": "ValueAxis-2"
  54. }
  55. ],
  56. "valueAxes": [
  57. {
  58. "id": "ValueAxis-1",
  59. "axisAlpha": 0
  60. },
  61. {
  62. "id": "ValueAxis-2",
  63. "axisAlpha": 0,
  64. "position": "bottom"
  65. }
  66. ],
  67. "allLabels": [],
  68. "balloon": {},
  69. "titles": [],
  70. "dataProvider": [
  71. {
  72. "y": 10,
  73. "x": 14,
  74. "value": 59,
  75. "y2": -5,
  76. "x2": -3,
  77. "value2": 44
  78. },
  79. {
  80. "y": 5,
  81. "x": 3,
  82. "value": 50,
  83. "y2": -15,
  84. "x2": -8,
  85. "value2": 12
  86. },
  87. {
  88. "y": -10,
  89. "x": -3,
  90. "value": 19,
  91. "y2": -4,
  92. "x2": 6,
  93. "value2": 35
  94. },
  95. {
  96. "y": -6,
  97. "x": 5,
  98. "value": 65,
  99. "y2": -5,
  100. "x2": -6,
  101. "value2": 168
  102. },
  103. {
  104. "y": 15,
  105. "x": -4,
  106. "value": 92,
  107. "y2": -10,
  108. "x2": -8,
  109. "value2": 102
  110. },
  111. {
  112. "y": 13,
  113. "x": 1,
  114. "value": 8,
  115. "y2": -2,
  116. "x2": -3,
  117. "value2": 41
  118. },
  119. {
  120. "y": 1,
  121. "x": 6,
  122. "value": 35,
  123. "y2": 0,
  124. "x2": -3,
  125. "value2": 16
  126. }
  127. ],
  128. "chartCursor": {},
  129. "legend": {
  130. "position": "bottom"
  131. },
  132. "responsive": {
  133. "enabled": true
  134. }
  135. });
  136. </script>
  137. </head>
  138. <body>
  139. <div id="chartdiv" style="width: 100%; height: 100%;"></div>
  140. </body>
  141. </html>