Question

我有一个用raphael创建的饼图。我有一个表单复选框，单击时我想将'效果'附加到饼图上。此示例尝试通过使用渐变创建一个圆圈来附加内部辉光与inGlowFun（）。

function allPie(){       

   var pie;     

        Raphael.fn.renderPie = function(cx,cy,r,values,total) {

            var canvas = this, 
                radian = Math.PI / 180,
                chart = this.set();

            function createSlice(cx, cy, r, startAngle, endAngle, params) {
                var x1 = cx + r * Math.cos(-startAngle * radian),
                    x2 = cx + r * Math.cos(-endAngle * radian),
                    y1 = cy + r * Math.sin(-startAngle * radian),
                    y2 = cy + r * Math.sin(-endAngle * radian);


                return canvas.path(["M", cx, cy, "L", x1, y1, "A", r, r, 0, +(endAngle - startAngle > 180), 0, x2, y2, "z"]).attr(params);
            }




            var angle = 90,
                process = function (j) {

                        var value = parseInt(values[j].spend, 10),
                        angleplus = 360 * value / total,
                        p = createSlice(cx, cy, r, angle - angleplus, angle, {fill: values[j].pieColour, stroke: "#FFF", "stroke-width": 1});

                    values[j].slice = p;    

                    angle -= angleplus;
                    chart.push(p);          
                };


            function glowFun(){
            canvas.circle(cx, cy, 140).attr({fill:"r#fff-#fff:96-#CCC", "stroke-width": 0});
            } 



            // creating each pie slice
            for (var i = 0, ii = values.length; i < ii; i++) {
                process(i);
            }
            //create inner gradient
            function hollowFun(){
            canvas.circle(cx, cy, 120).attr({fill:"85-#fff-#CCC", "stroke-width": 20, "stroke": "#FFF", 'opacity': 0.000001} );
            }




            // inner glow (I admit this is a bit of a hack but it keeps it simple)
            function inGlowFun(){
           canvas.circle(cx, cy, 55).attr({fill:"r#fff-#fff:85-#CCC", "stroke-width": 2, "stroke": "#FFF"});
            }
            if(box.checked){
            inGlowFun();
            }

            // returning the whole set of nodes for interactions later
            return chart;

        };







        // creating a namespace for this code so that anything we create won't effect other JavaScript on the page
        var dotNet = window.dotNet || {};








        /*
        a function that parses the data contained in the data table, creates the Raphaël object we're drawing too and calls our Raphaël plug-in
            $source - reference to the data source (an HTML table in this example)
            $container - reference to the HTML element we're creating the chart inside
        */    
        dotNet.makePie = function($source, $container, pie) {    
            var pie;
            /*
            few constannt variables for this function
                pieData - an empty array that will hold an object for each section
                totalSpend - the grand total of all the rows (calculated via code for greater accuracy)
            */
            var pieData = [],
                totalSpend = 0;


            /* 
            function to parse each table row, create HTML and attach events
                i - index of the iteraction
            */
            function prepare(i) {

                /*
                variables used for each call
                    row - jQuery object of the current table row
                    values - an empty object that will be filled with data and references associated with each row
                    head - jQuery object used to reference the th of the current row
                */
                var row = $(this),
                    values = {},
                    head = row.find('.tabh');

                // grabbing the numeric total for the row and assigning to values
                values.spend = row.find('.tdh').text();
                // each pie slice will now be styled in a CSS file -keeping style where it should be other than in JavaScript
                values.pieColour = row.find('th span').css('borderLeftColor');

                // increase total value
                totalSpend += parseInt(values.spend, 10);

                // push values into the array for access later
                pieData.push(values);

            }

            // iterate through each table row (only in the body)    
            $source.find('.tbh tr').each(prepare);



            // call the plugin to create the chart    
            var sizeman = 300
            var sizepiespace = sizeman /2
            var sizepie = sizeman / (30/13)
            if(pie){
            pie.clear();
            }
            pie = Raphael($container[0], sizeman, sizeman).renderPie(sizepiespace, sizepiespace, sizepie, pieData, totalSpend);

            // attaching an event to the Raphaël set that fades all the slice back to full opacity
            pie.mouseout(function() {
                pie.attr('opacity', 1);
            });

        };


// calling our makePie function on DOM ready
        function piefunc(){
         $(function() {
          dotNet.makePie($('table'),$('#pie'), pie);
    });
    }
   piefunc();

}

This is the checkbox that it applies to and where the pie is actually run.
            <form>
            <input type="checkbox" id="checker" onclick="checkFun();" />
            </form>

            <script type="text/javascript">



            var box = document.getElementById('checker');
        function checkFun(){
        allPie();

        }

    allPie();
    pieShower();
            </script>

当单击该复选框时，它确实会生成一个具有所需效果的新饼图，不幸的是它还会将先前版本向下推并保持在同一页面上，因此当您继续检查并取消选中该框时，会越来越多地制作在页面上。无论如何要在创建具有所需效果的新图表时“删除”或删除页面上已有的图表？

Answer 1

试试这个

使var pie成为全局变量而不是本地变量

在var pie = Raphael($container.....

之前

添加以下内容

if(pie){
    pie.clear();
}

另外，您最好使用 graphael piechart api而不是当前的方式（INMO）

查看我的jsfiddle with hover (glow like) effect + click callback

拉斐尔图表，更新和替换

1 个答案: