Angle tag solutions for Graphael multiple line chart

问题

I've tried to create an multipleline chart with tag for each node. Every things ok. But some time the tags are showed not good when the values are nearly. Any one have solution for this problem. Thank!

http://www.flickr.com/photos/96516997@N02/8973858413/

This is my Graphael Line Chart

<script src="js/raphael-min.js"></script>
<script src="js/g.raphael-min.js"></script>
<script src="js/g.line-min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<style type="text/css">
    .block {
  text-align: center;
  background: #c0c0c0;
}

.block:before {
  content: '';
  display: inline-block;
  height: 100%; 
  vertical-align: middle;
 }

.centered1{
  display: inline-block;
  vertical-align: middle;
  width: 97%;
  background: #f5f5f5;
 }

.centered2{
    text-align: left;
  display: inline-block;
  vertical-align: middle;
  width: 97%;
  background: #f5f5f5;
 }
</style>

<script type="text/javascript">
    var hidedChart = [ false, false, false, false];
    var paper;
    var chart;
    var xData = [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11 ];
    var yData = [ [ 31, 62, 3, 4, 5, 60, 47, 8, 9, 10, 51, 72 ],
            [ 31, 33, 44, 11, 55, 60, 71, 82, 19, 141, 23, 34 ],
            [ 3, 2, 49, 64, 51, 26, 43, 14, 39, 10, 41, 32 ],
            [ 10, 330, 50, 34, 53, 12, 67, 84, 32, 171, 239, 36 ]];
    var colory = [ "#9e1316", "#007fff", "#104421", "#734f96", "#b43f26" ];
    var xAxis = [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug",
            "Sep", "Oct", "Nov", "Dec" ];
    var direcTag = [ 'right', 'up', 'left', 'down' ];
    var angle = [0,45,90,135,180,225,270,315];
    var options = {
        symbol : "circle",
        nostroke : false,
        smooth : false,
        colors : colory,
        shade : true,
        fill : "transparent",
        axis : "0 0 1 1",
        axisxstep : xAxis.length - 1,
        axisystep : 5
    };

    window.onload = function() {
        paper = Raphael("no", "800", "550");

        //line chart object
        chart = drawLineChart(34, 35, 600, 450, xData, yData, options);
        addCheckBox(yData.length);

    }

    $(window).load(function(){

    });

    function drawLineChart(x, y, w, h, xdata, ydata, options) {

        var lines = paper.linechart(x, y, w, h, xdata, ydata, options);

        lines.hoverColumn(hoverColumn, unhoverColumn);


        //set x Axis label
        $.each(lines.axis[0].text.items, function(index, label) {
            this.attr("text", xAxis[index]);
        });

        for ( var i = 0; i < ydata.length; i++) {
            lines.shades[i].attr({
                fill : "transparent"
            });
        }
        lines.symbols.attr({
            r : 4
        });

        return lines

    }

    function hoverColumn() {
        this.tags = paper.set();
        for ( var i = 0, ii = this.y.length; i < ii; i++) {

            if (hidedChart[i] == false) {
                var nTag;

                nTag = paper.drop(this.x, this.y[i], this.values[i],
                            angle[i]);
                this.tags.push(nTag.insertBefore(this).attr([ {
                    fill : colory[i]
                }, {
                    fill : "#ffffff"
                } ]));
            }
        }
    }
    function unhoverColumn() {
        this.tags && this.tags.remove();
    }

    function showHideLine(num) {
        if((!$("#LINE"+num).is(':checked')) != hidedChart[num]){
            hidedChart[num] = !hidedChart[num];

            if (hidedChart[num] == true) {
                chart.lines[num].attr({
                    opacity : 0
                });

                chart.symbols[num].attr({
                    opacity : 0
                });
            } else {
                chart.lines[num].attr({
                    opacity : 100
                });

                chart.symbols[num].attr({
                    opacity : 100
                });
            }
        }
    }

    function addCheckBox(num) {
        $("#lineCheck").empty();        
        for ( var i = 0; i < num; i++) {
            //CHECK BOX
            var checkbox = document.createElement("input");
            checkbox.type = "checkbox";
            checkbox.id = "LINE" + i;
            checkbox.style.margin = "7px";
            checkbox.checked = "checked";

            $(checkbox).click(function() {
                for ( var j = 0; j < num; j++) {
                    showHideLine(j);
                }
            });

            //LABEL
            var label = document.createElement("label");
            label.htmlFor = "LINE" + i;
            label.appendChild(document.createTextNode("Line " + (i + 1)));

            //BREAK LINE
            var br = document.createElement("br");

            $("#lineCheck").append(checkbox);
            $("#lineCheck").append(label);
            $("#lineCheck").append(br);
        }
    }
</script>


</head>
<body>
    <div id="padLeft" class="block" style="float: left; width: 84%; height: 100%;">
        <div id="no" class="centered1"></div>
    </div>
    <div id="padRight" class="block" style="float: right; height: 100%; width: 15%;" align="left">
        <div id="lineCheck" class="centered2"></div>
    </div>



</body>

</html>

来源：https://stackoverflow.com/questions/16975772/angle-tag-solutions-for-graphael-multiple-line-chart