概要 实例 介绍 源码

码表

源文件:index.html

  1. <!DOCTYPE html>
  2. <head>
  3. <title>Speedometer</title>
  4. <link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Play:700,400' type='text/css'>
  5. <script type="text/javascript" src="http://iop.io/js/vendor/d3.v3.min.js"></script>
  6. <script type="text/javascript" src="http://iop.io/js/vendor/polymer/PointerEvents/pointerevents.js"></script>
  7. <script type="text/javascript" src="http://iop.io/js/vendor/polymer/PointerGestures/pointergestures.js"></script>
  8. <script type="text/javascript" src="http://iop.io/js/iopctrl.js"></script>
  9. <style>
  10. body {
  11. font: 16px arial;
  12. background-color: #515151;
  13. }
  14. .unselectable {
  15. -moz-user-select: -moz-none;
  16. -khtml-user-select: none;
  17. -webkit-user-select: none;
  18. -ms-user-select: none;
  19. user-select: none;
  20. }
  21. /* css formats for the gauge */
  22. .gauge .domain {
  23. stroke-width: 2px;
  24. stroke: #fff;
  25. }
  26. .gauge .tick line {
  27. stroke: #fff;
  28. stroke-width: 2px;
  29. }
  30. .gauge line {
  31. stroke: #fff;
  32. }
  33. .gauge .arc, .gauge .cursor {
  34. opacity: 0;
  35. }
  36. .gauge .major {
  37. fill: #fff;
  38. font-size: 20px;
  39. font-family: 'Play', verdana, sans-serif;
  40. font-weight: normal;
  41. }
  42. .gauge .indicator {
  43. stroke: #EE3311;
  44. fill: #000;
  45. stroke-width: 4px;
  46. }
  47. /* css formats for the segment display */
  48. .segdisplay .on {
  49. fill: #00FFFF;
  50. }
  51. .segdisplay .off {
  52. fill: #00FFFF;
  53. opacity: 0.15;
  54. }
  55. </style>
  56. </head>
  57. <body>
  58. <div>
  59. <span id="speedometer"></span>
  60. </div>
  61. <script>
  62. var svg = d3.select("#speedometer")
  63. .append("svg:svg")
  64. .attr("width", 400)
  65. .attr("height", 400);
  66. var gauge = iopctrl.arcslider()
  67. .radius(120)
  68. .events(false)
  69. .indicator(iopctrl.defaultGaugeIndicator);
  70. gauge.axis().orient("in")
  71. .normalize(true)
  72. .ticks(12)
  73. .tickSubdivide(3)
  74. .tickSize(10, 8, 10)
  75. .tickPadding(5)
  76. .scale(d3.scale.linear()
  77. .domain([0, 160])
  78. .range([-3*Math.PI/4, 3*Math.PI/4]));
  79. var segDisplay = iopctrl.segdisplay()
  80. .width(80)
  81. .digitCount(6)
  82. .negative(false)
  83. .decimals(0);
  84. svg.append("g")
  85. .attr("class", "segdisplay")
  86. .attr("transform", "translate(130, 200)")
  87. .call(segDisplay);
  88. svg.append("g")
  89. .attr("class", "gauge")
  90. .call(gauge);
  91. segDisplay.value(56749);
  92. gauge.value(92);
  93. </script>
  94. </body>