pie2.html 1.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
  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. </style>
  17. <script>
  18. AmCharts.makeChart("chartdiv", {
  19. "type": "pie",
  20. "titles": [{
  21. "text": "Visitors countries",
  22. "size": 16
  23. }],
  24. "dataProvider": [{
  25. "country": "United States",
  26. "visits": 7252
  27. }, {
  28. "country": "China",
  29. "visits": 3882
  30. }, {
  31. "country": "Japan",
  32. "visits": 1809
  33. }, {
  34. "country": "Germany",
  35. "visits": 1322
  36. }, {
  37. "country": "United Kingdom",
  38. "visits": 1122
  39. }, {
  40. "country": "France",
  41. "visits": 414
  42. }, {
  43. "country": "India",
  44. "visits": 384
  45. }, {
  46. "country": "Spain",
  47. "visits": 211
  48. }],
  49. "valueField": "visits",
  50. "titleField": "country",
  51. "startEffect": "elastic",
  52. "startDuration": 2,
  53. "labelRadius": 15,
  54. "innerRadius": "50%",
  55. "depth3D": 10,
  56. "balloonText": "[[title]]<br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)</span>",
  57. "angle": 15,
  58. "legend": {
  59. "position": "right"
  60. },
  61. "responsive": {
  62. "enabled": true
  63. }
  64. });
  65. </script>
  66. </head>
  67. <body>
  68. <div id="chartdiv" style="width: 100%; height: 100%;"></div>
  69. </body>
  70. </html>