show-hide - Graphael 多折线图的角度标签解决方案

Question

我试图为每个节点创建一个带有标签的多线图。一切都好。但是有时当值接近时，标签显示不好。任何人都有解决这个问题的方法。感谢！

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

这是我的 Graphael 折线图

<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>