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

0 
onmouseout='_resetHighlights()'

関数_resetHighlights()は定義されていません!

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

関数_identifyobject()は定義されていません!

于 2013-06-27T10:07:55.203 に答える
0

円グラフで各要素が占める面積を計算する、本当にまともなアルゴリズムがあります。マウス オーバー イベントをすべてのパイ スライスの親要素に追加し、マウスの位置を使用してどのスライスの上にいるかを把握します。要素がオーバーラップしているため、DOM はどの要素が mouseover イベントのターゲットであるかを推測するのに苦労します。繰り返しになりますが、これらの領域を計算するための非常に優れたアルゴリズムがあるので、それを何らかの形で利用してこれを把握できると確信しています。それは理にかなっていますか？そうだといい！

于 2013-06-27T14:08:03.247 に答える