6

我所拥有的是：

  1. 我显示了一张饼图的图像
  2. 我有一张饼图的图像地图
  3. 默认浏览器工具提示显示在鼠标移动到图像上

我想做的是：

  1. 在饼图切片 touchmove 上，在相对于饼图的圆形路径上移动绿色标记（一个 div）

我想要达到的目标：

  1. 在将 div 圆形移动到饼图时显示默认浏览器工具提示
  2. 在图像周围移动绿色标记（div）时显示饼图区域的值

我该如何做到这一点？

当前饼图

一些代码：
小提琴链接：这里

$("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
});
4

2 回答 2

5

令人惊讶的是，您的问题只能通过 CSS 解决（注意，我没有检查这是否适用于触摸设备，但应该可以）：

area {
    display:block;
    position: absolute;
}

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

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

但是，如果您想保持 javascript 的灵活性，您实际上不需要检查拖动状态，因为 touchmove 意味着手指被按下。您不应该需要嵌套的窗口加载事件（无论如何它不会在 Chrome 中触发）。这稍微简化了代码。

$(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'));
});

});

你可以在这里看到这两种实现：http: //jsfiddle.net/Wz7fF/

于 2013-02-12T05:21:40.750 回答
0

你为什么不使用像 HighCharts 这样的标准库，让它处理你想要显示的工具提示信息。

于 2013-02-07T09:54:30.957 回答