3

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

http://jsfiddle.net/QzWrL/5/

$.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，工具提示也不会显示。

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

4

3 回答 3

1

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

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

我希望这个CSS+ HTML'演示'可以帮助你。如果您有任何问题，请写评论。:)

编辑：

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

于 2013-06-27T12:39:08.753 回答
0 
onmouseout='_resetHighlights()'

功能_resetHighlights()未定义！

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

功能_identifyobject()未定义！

于 2013-06-27T10:07:55.203 回答
0

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

于 2013-06-27T14:08:03.247 回答