Cách hiển thị hướng gió trên la bàn

Question

Tôi đang làm việc trên ứng dụng web, nơi tôi phải hiển thị nhiệt độ, độ ẩm, tốc độ gió, hướng gió, v.v .. Tôi đang sử dụng google.visualization.Gauge() để hiển thị những thứ khác nhưng Tôi muốn chỉ hướng gió trên một la bàn. Có ai biết về bất kỳ (jQuery/javascript/etc) la bàn có sẵn mà tôi có thể sử dụng cho một trang web/webapp? Cảm ơn

Answer 1

Đây là cách tiếp cận của tôi chỉ sử dụng CSS. Sử dụng biến đổi để xoay kim. DEMO Bạn cũng có thể sử dụng plugin jQuery Rotate.

HTML

<div id="compass"> 
    <div id="arrow"></div> 
</div>​ 

CSS

#compass { 
    width: 380px; 
    height: 380px; 
    background-image:url('http://i.imgur.com/44nyA.jpg'); 
    position: relative; 
} 
#arrow { 
    width: 360px; 
    height: 20px; 
    background-color:#F00; 
    position: absolute; 
    top: 180px; 
    left: 10px; 
    -webkit-transform:rotate(120deg); 
    -moz-transform:rotate(120deg); 
    -o-transform:rotate(120deg); 
    -ms-transform:rotate(120deg); 

    -moz-transition: all 1s ease; 
    -webkit-transition: all 1s ease; 
    -o-transition: all 1s ease; 
    transition: all 1s ease; 
} 

#compass:hover #arrow { 
    -webkit-transform:rotate(0deg); 
    -moz-transform:rotate(0deg); 
    -o-transform:rotate(0deg); 
    -ms-transform:rotate(0deg); 
}​ 

Answer 2

HTML5 và Canvas của nó sẽ thực hiện công việc ngắn này.

http://www.tutorialspoint.com/html5/canvas_drawing_lines.htm

Tôi chỉ đăng nó ở đây cho đầy đủ, cá nhân tôi vẫn muốn dính vào một thư viện javascript.