You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

87 lines
2.9 KiB

1 year ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
  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. <title>amCharts examples</title>
  6. <link rel="stylesheet" href="style.css" type="text/css">
  7. <script src="../amcharts/amcharts.js" type="text/javascript"></script>
  8. <script src="../amcharts/serial.js" type="text/javascript"></script>
  9. <script>
  10. var chart;
  11. var chartData = [
  12. {
  13. "year": 2005,
  14. "income": 23.5
  15. },
  16. {
  17. "year": 2006,
  18. "income": 26.2
  19. },
  20. {
  21. "year": 2007,
  22. "income": 30.1
  23. },
  24. {
  25. "year": 2008,
  26. "income": 29.5
  27. },
  28. {
  29. "year": 2009,
  30. "income": 24.6
  31. }
  32. ];
  33. AmCharts.ready(function () {
  34. // SERIAL CHART
  35. chart = new AmCharts.AmSerialChart();
  36. chart.dataProvider = chartData;
  37. chart.categoryField = "year";
  38. // this single line makes the chart a bar chart,
  39. // try to set it to false - your bars will turn to columns
  40. chart.rotate = true;
  41. // the following two lines makes chart 3D
  42. chart.depth3D = 20;
  43. chart.angle = 30;
  44. // AXES
  45. // Category
  46. var categoryAxis = chart.categoryAxis;
  47. categoryAxis.gridPosition = "start";
  48. categoryAxis.axisColor = "#DADADA";
  49. categoryAxis.fillAlpha = 1;
  50. categoryAxis.gridAlpha = 0;
  51. categoryAxis.fillColor = "#FAFAFA";
  52. // value
  53. var valueAxis = new AmCharts.ValueAxis();
  54. valueAxis.axisColor = "#DADADA";
  55. valueAxis.title = "Income in millions, USD";
  56. valueAxis.gridAlpha = 0.1;
  57. chart.addValueAxis(valueAxis);
  58. // GRAPH
  59. var graph = new AmCharts.AmGraph();
  60. graph.title = "Income";
  61. graph.valueField = "income";
  62. graph.type = "column";
  63. graph.balloonText = "Income in [[category]]:[[value]]";
  64. graph.lineAlpha = 0;
  65. graph.fillColors = "#bf1c25";
  66. graph.fillAlphas = 1;
  67. chart.addGraph(graph);
  68. chart.creditsPosition = "top-right";
  69. // WRITE
  70. chart.write("chartdiv");
  71. });
  72. </script>
  73. </head>
  74. <body>
  75. <div id="chartdiv" style="width: 500px; height: 600px;"></div>
  76. </body>
  77. </html>