pie3.html 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
  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: 80%;
  24. position: relative;
  25. }
  26. #legenddiv {
  27. width: 100%;
  28. height: 19%;
  29. position: relative;
  30. }
  31. </style>
  32. <script type="text/javascript">
  33. var chart = AmCharts.makeChart( "chartdiv", {
  34. "type": "pie",
  35. "dataProvider": [ {
  36. "country": "Czech Republic",
  37. "litres": 156.9
  38. }, {
  39. "country": "Ireland",
  40. "litres": 131.1
  41. }, {
  42. "country": "Germany",
  43. "litres": 115.8
  44. }, {
  45. "country": "Australia",
  46. "litres": 109.9
  47. }, {
  48. "country": "Austria",
  49. "litres": 108.3
  50. }, {
  51. "country": "UK",
  52. "litres": 65
  53. }, {
  54. "country": "Belgium",
  55. "litres": 50
  56. } ],
  57. "titleField": "country",
  58. "valueField": "litres",
  59. "balloonText": "[[title]]<br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)</span>",
  60. "innerRadius": "30%",
  61. "legend": {
  62. "align": "center",
  63. "markerType": "circle",
  64. "divId": "legenddiv"
  65. },
  66. "export": {
  67. "enabled": true,
  68. "position": "top-left",
  69. "legend": {
  70. "position": "bottom"
  71. }
  72. }
  73. } );
  74. </script>
  75. </head>
  76. <body>
  77. <div id="chartdiv"></div>
  78. <div id="legenddiv"></div>
  79. </body>
  80. </html>