2013-02-07 19 views
6

Ne var olduğunu:resmin üzerine div hareketli araç ipucu gösterme

  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? Current Pie Chart

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 
}); 
+1

sizinle herhangi bir kodu var mı? Bir [Keman] (http://jsfiddle.net) harika olurdu! :) –

+1

@Praveen Kumar: Fiddle bağlantısı ve bazı kod eklendi. – nagesh

cevap

5

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/

0

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

+1

Yüksek şemalar ihtiyacımız olan şey değil. Grafikler jFree kullanılarak oluşturuldu ve bu değiştirilemez. – nagesh