Question

在下面的饼图插件中，某些元素没有显示工具提示标题。

$.widget("ui.piechart", {
    options: {
        width: 400,
        height: 200,
        data: null,
        labels: null,
        legendcolorwidth: '20px',
        legendwidth: '200px'
    },

    _create: function () {
        var pierIndex = 0;
        var labelIndex = 0;
        var colorIndex = 0;

        var width = this.options.width;
        var height = width / 2;        
        function getPier(deg, label, sno) {            
            var cssSize = "width:" + height + "px;height:" + height + "px;";
            var halfSize = height * .5;
            var commonCss = "position:absolute;clip : rect(" +
           halfSize + "px," +
           height + "px," + height + "px,0px);";
            var html =
           $("<div style='-moz-transform: rotate(" +
           pierIndex + "deg);-webkit-transform: rotate(" +
           pierIndex + "deg);-ms-transform:rotate(" +
           pierIndex + "deg);" + cssSize + commonCss +
             "' ><span class='piedata' id='piedata" + sno + "' href='#' class='pier' style='cursor:pointer;-moz-transform:rotate(" +
           (deg - 180) + "deg);-webkit-transform:rotate(" +
           (deg - 180) + "deg);-ms-transform:rotate(" +
           (deg - 180) + "deg);" + cssSize + commonCss + "border-radius:" +
           height + "px;box-shadow : inset 0 0 8px gray;background:" +
           colors[(colorIndex++ % colors.length)] +
           "' title='" + label + " (" + Math.round(deg / 3.6) + "%)' ></span></div>");
            pierIndex += deg;
            return html;
        }

        this.element.css('width', width / 2 + 'px')
        .css('height', height + 'px')
        .toggleClass('ui-piechart-default');
        var total = 0;
        if (this.options.labels == null)
            this.options.labels = new Array();
        for (var i = 0; i < this.options.data.length; i++) {
            if (this.options.labels[i] == undefined)
                this.options.labels[i] = "";
            total += this.options.data[i];
            totalchartarea += this.options.data[i];
        }

        for (var i = 0; i < this.options.data.length; i++)
            this.element.append(getPier((360 / total) * this.options.data[i], this.options.labels[i], i));

        this._createLabels();
    },

    _createLabels: function () {
        var left = this.options.width * 0.6;
        var rows = "";
        for (var i = 0; i < this.options.data.length; i++) {
            rows += "<tr class='piedatalegend'  id='piedatalegend" + i + "' style='cursor:pointer' ><td style='background-color: " +
            colors[i % colors.length] + ";min-width: " + this.options.legendcolorwidth + ";min-height:" + this.options.legendcolorwidth + ";'></td><td>&nbsp;" +
                this.options.labels[i] +
            "</td></tr>";
        }

        this.element.append("<div class='ui-piechart-legend'  style='height:" + this.options.width / 2 + "px;overflow-y: auto;width:" + this.options.legendwidth + ";position:relative;left: " +
          left + "px;'><table style='border-spacing: 0px;background: white;padding: 4px;'>" +

          rows +

          "</table></div>");
    }
});

检查a到e的标签，他们不会显示工具提示。因为元素是重叠和绘制的。即使我以任何顺序设置z-index，工具提示也不显示。

无论如何我能克服这个鼠标悬停问题吗？

Answer 1

div s将始终相互重叠，因为它们的旋转点（transform-origin）位于中心位置。尝试修改它，例如。左上角：

http://jsfiddle.net/Stocki/DtC4B/

我希望CSS + HTML'演示'可以为您提供帮助。如果您有任何疑问，请写评论。：）

编辑：

JS的工作版本：http://jsfiddle.net/Stocki/DtC4B/6/

Answer 2

onmouseout='_resetHighlights()'

函数_resetHighlights()未定义！

onmouseover='_identifyobject(" + i + ");'

函数_identifyobject()未定义！

Answer 3

你有一个非常不错的算法，可以计算每个元素在饼图中占据的面积。我会将事件上的鼠标追加到所有饼图切片的父元素上，并使用鼠标位置来确定我在上面的切片。由于元素的重叠，DOM将很难推断出哪个元素是mouseover事件的目标。再一次，你有一个非常好的计算这些区域的算法，所以我相信你可以用它来解决这个问题。那有意义吗？我希望如此！

鼠标悬停不在重叠元素上工作

3 个答案:

编辑：