pie2.html 2.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697
  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/pie.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": "pie",
  29. "titles": [ {
  30. "text": "Visitors countries",
  31. "size": 16
  32. } ],
  33. "dataProvider": [ {
  34. "country": "United States",
  35. "visits": 7252
  36. }, {
  37. "country": "China",
  38. "visits": 3882
  39. }, {
  40. "country": "Japan",
  41. "visits": 1809
  42. }, {
  43. "country": "Germany",
  44. "visits": 1322
  45. }, {
  46. "country": "United Kingdom",
  47. "visits": 1122
  48. }, {
  49. "country": "France",
  50. "visits": 414
  51. }, {
  52. "country": "India",
  53. "visits": 384
  54. }, {
  55. "country": "Spain",
  56. "visits": 211
  57. } ],
  58. "valueField": "visits",
  59. "titleField": "country",
  60. "startEffect": "elastic",
  61. "startDuration": 2,
  62. "labelRadius": 15,
  63. "innerRadius": "50%",
  64. "depth3D": 10,
  65. "balloonText": "[[title]]<br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)</span>",
  66. "angle": 15,
  67. "legend": {
  68. "position": "right"
  69. },
  70. "export": {
  71. "enabled": true,
  72. "menu": [ {
  73. "class": "export-main",
  74. "menu": [ {
  75. "label": "Download",
  76. "menu": [ "PNG", "JPG", "CSV" ]
  77. }, {
  78. "label": "Annotate",
  79. "action": "draw",
  80. "menu": [ {
  81. "class": "export-drawing",
  82. "menu": [ "PNG", "JPG", "CANCEL" ]
  83. } ]
  84. } ]
  85. } ]
  86. }
  87. } );
  88. </script>
  89. </head>
  90. <body>
  91. <div id="chartdiv"></div>
  92. </body>
  93. </html>