pie3.html 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106
  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/pie.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. .chartdiv {
  17. width: 50%;
  18. height: 100%;
  19. float: left;
  20. }
  21. </style>
  22. <script>
  23. AmCharts.makeChart( "chart1", {
  24. "type": "pie",
  25. "titles": [ {
  26. "text": "Visits",
  27. "size": 16
  28. } ],
  29. "dataProvider": [ {
  30. "country": "United States",
  31. "visits": 7252
  32. }, {
  33. "country": "China",
  34. "visits": 3882
  35. }, {
  36. "country": "Japan",
  37. "visits": 1809
  38. }, {
  39. "country": "Germany",
  40. "visits": 1322
  41. }, {
  42. "country": "United Kingdom",
  43. "visits": 1122
  44. } ],
  45. "valueField": "visits",
  46. "titleField": "country",
  47. "startEffect": "elastic",
  48. "startDuration": 2,
  49. "labelRadius": 15,
  50. "innerRadius": "50%",
  51. "depth3D": 10,
  52. "balloonText": "[[title]]<br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)</span>",
  53. "angle": 15,
  54. "legend": {},
  55. "responsive": {
  56. "enabled": true
  57. }
  58. } );
  59. AmCharts.makeChart( "chart2", {
  60. "type": "pie",
  61. "theme": "none",
  62. "titles": [ {
  63. "text": "Views",
  64. "size": 16
  65. } ],
  66. "dataProvider": [ {
  67. "country": "United States",
  68. "visits": 10616
  69. }, {
  70. "country": "China",
  71. "visits": 9845
  72. }, {
  73. "country": "Japan",
  74. "visits": 3111
  75. }, {
  76. "country": "Germany",
  77. "visits": 2874
  78. }, {
  79. "country": "United Kingdom",
  80. "visits": 2110
  81. } ],
  82. "valueField": "visits",
  83. "titleField": "country",
  84. "startEffect": "elastic",
  85. "startDuration": 2,
  86. "labelRadius": 15,
  87. "innerRadius": "50%",
  88. "depth3D": 10,
  89. "balloonText": "[[title]]<br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)</span>",
  90. "angle": 15,
  91. "legend": {},
  92. "responsive": {
  93. "enabled": true
  94. }
  95. } );
  96. </script>
  97. </head>
  98. <body>
  99. <div id="chart1" class="chartdiv"></div>
  100. <div id="chart2" class="chartdiv"></div>
  101. </body>
  102. </html>