resmin üzerine div hareketli araç ipucu gösterme

Question

Ne var olduğunu:

1. Ben pasta grafik
2. varsayılan tarayıcı bir görüntü harita var
3. gösterilen bir pasta grafiği bir görüntü var ipucu resmin üzerine fare hareket halindeyken gösterilmektedir

ne yapmaya çalışıyorum geçerli:

pasta grafik dilim touchmove On

1. , pasta grafiğe dairesel izde Yeşil Marker (div) hareket elde etmek istiyorum ne

:

1. Ya gösterisi varsayılan tarayıcı araç ipucunu pasta grafiğine hareket ettirme
2. Görüntüdeki Yeşil İşaretleyiciyi (div) hareket ettirme konusunda turta alanlarının değerlerini göster

Bunu nasıl başarabilirim?

Bazı Kodu:
Fiddle Bağlantı: here

$("img").bind("touchmove",function(event) { 
    e=event.originalEvent; 
    x1 = e.pageX; 
    y1 = e.pageY; 
    x = x1 - x0; 
    y = y1 - y0; 

    r = 180 - ((180/Math.PI) * Math.atan2(y,x)); 

    $("#marker").css('-webkit-transform','rotate(-'+r+'deg) translate(-160px)'); 

    // Code to show values of Pie as a tooltip or in a separate div 
}); 

Answer 1

Hayret, senin sorunun yalnızca CSS ile çözülebilir (not bu dokunmatik cihazda çalışıp çalışmadığını Kontrol etmedim ama olması gerektiği):

area { 
    display:block; 
    position: absolute; 
} 

area:after { 
    background: red; 
    color: white; 
    position: absolute; 
    display: block; 
    white-space: nowrap; 
} 

area:hover:after { 
    content: attr(title); 
} 

Ancak, javascript tutmak istiyorsanız esneklik için, touchmove parmağın basıldığını ima ettiğinden, sürükleme durumunu gerçekten kontrol etmeniz gerekmez. Yuvalanmış pencere yük olayına (Chrome'da hiç sönmeyen) gerek duymamalısınız. Bu, kodu biraz kolaylaştırır.

$(document).ready(function(){ 
    var angle=180; 
    var x0, y0; 
    var x, y, x1, y1, drag = 0; 
    var content=$("#content"); 
    var img=$("#myimage"); 
    var imgpos = img.position(); 
    var marker = $("#marker"); 
    var info = $("#info"); 


    $(document).bind('touchmove touchstart',function(e){ 

     e.originalEvent.preventDefault(); 
    }); 

    img.removeAttr("width"); 
    img.removeAttr("height"); 

    x0 = imgpos.left + (img.width()/2); 
    y0 = imgpos.top + (img.height()/2); 

content.on("touchmove mousemove", "map", function(event) { 
    e=event.originalEvent; 
    x1 = e.pageX; 
    y1 = e.pageY; 
    x = x1 - x0; 
    y = y1 - y0; 
    r = 180 - ((180/Math.PI) * Math.atan2(y,x)); 
    marker.css('-webkit-transform','rotate(-'+r+'deg) translate(-160px)'); 
    info.text(event.target.getAttribute('title')); 
}); 

}); 

Burada eylem iki uygulamaları görebilirsiniz: http://jsfiddle.net/Wz7fF/

Answer 2

Neden böyle Highcharts gibi standart kitaplığı kullanarak ve bunu istediğiniz araç ipucu bilgisini halledeyim değildir Görüntüle.