pie1.html 1.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  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. "dataProvider": [{
  21. "country": "Czech Republic",
  22. "litres": 156.9
  23. }, {
  24. "country": "Ireland",
  25. "litres": 131.1
  26. }, {
  27. "country": "Germany",
  28. "litres": 115.8
  29. }, {
  30. "country": "Australia",
  31. "litres": 109.9
  32. }, {
  33. "country": "Austria",
  34. "litres": 108.3
  35. }, {
  36. "country": "UK",
  37. "litres": 65
  38. }, {
  39. "country": "Belgium",
  40. "litres": 50
  41. }],
  42. "titleField": "country",
  43. "valueField": "litres",
  44. "balloonText": "[[title]]<br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)</span>",
  45. "innerRadius": "30%",
  46. "legend": {
  47. "align": "center",
  48. "markerType": "circle"
  49. },
  50. "responsive": {
  51. "enabled": true,
  52. "addDefaultRules": true,
  53. "rules": [
  54. {
  55. "minWidth": 500,
  56. "overrides": {
  57. "innerRadius": "50%",
  58. }
  59. }
  60. ]
  61. }
  62. });
  63. </script>
  64. </head>
  65. <body>
  66. <div id="chartdiv" style="width: 100%; height: 100%;"></div>
  67. </body>
  68. </html>