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.

73 lines
2.3 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/gauge.js" type="text/javascript"></script>
  9. <script>
  10. var chart;
  11. var arrow;
  12. var axis;
  13. AmCharts.ready(function () {
  14. // create angular gauge
  15. chart = new AmCharts.AmAngularGauge();
  16. chart.addTitle("Speedometer");
  17. // create axis
  18. axis = new AmCharts.GaugeAxis();
  19. axis.startValue = 0;
  20. axis.axisThickness = 1;
  21. axis.valueInterval = 10;
  22. axis.endValue = 220;
  23. // color bands
  24. var band1 = new AmCharts.GaugeBand();
  25. band1.startValue = 0;
  26. band1.endValue = 90;
  27. band1.color = "#00CC00";
  28. var band2 = new AmCharts.GaugeBand();
  29. band2.startValue = 90;
  30. band2.endValue = 130;
  31. band2.color = "#ffac29";
  32. var band3 = new AmCharts.GaugeBand();
  33. band3.startValue = 130;
  34. band3.endValue = 220;
  35. band3.color = "#ea3838";
  36. band3.innerRadius = "95%";
  37. axis.bands = [band1, band2, band3];
  38. // bottom text
  39. axis.bottomTextYOffset = -20;
  40. axis.setBottomText("0 km/h");
  41. chart.addAxis(axis);
  42. // gauge arrow
  43. arrow = new AmCharts.GaugeArrow();
  44. chart.addArrow(arrow);
  45. chart.write("chartdiv");
  46. // change value every 2 seconds
  47. setInterval(randomValue, 2000);
  48. });
  49. // set random value
  50. function randomValue() {
  51. var value = Math.round(Math.random() * 200);
  52. arrow.setValue(value);
  53. axis.setBottomText(value + " km/h");
  54. }
  55. </script>
  56. </head>
  57. <body>
  58. <div id="chartdiv" style="width:500px; height:400px;"></div>
  59. </body>
  60. </html>