Question

我解决了一个问题。

我想使用raphaeljs或其他方法构建一个条形图，主要的功能是，一旦绘制，条形应该通过鼠标拖动来调整大小，并且一旦拖动停止就能够获得它们的当前值。我已经尝试了波纹管代码，但它不起作用。

        function  drawchart()
        {


            var data  =  [1,2,3];


            /* 
             * Create an instance of raphael and specify:
             * the ID of the div where to insert the graph
             * the width
             * the height
             * Tip: Remember that the reference point (0, 0) is at the top left position.
             */
            var r = Raphael("holder",600,300);


            // start, move, and up are the drag functions
            start = function () {
                // storing original coordinates
                this.ox = this.attr("x");
                this.oy = this.attr("y");
                this.attr({opacity: 1});

                this.sizer.ox = this.sizer.attr("x");
                this.sizer.oy = this.sizer.attr("y");
                this.sizer.attr({opacity: 1});
            },
            move = function (dx, dy) {
                // move will be called with dx and dy
                this.attr({x: this.ox + dx, y: this.oy + dy});
                this.sizer.attr({x: this.sizer.ox + dx, y: this.sizer.oy + dy});        
            },
            up = function () {
                // restoring state
                this.attr({opacity: .5});
                this.sizer.attr({opacity: .5});        
            },
            rstart = function () {
                // storing original coordinates
                this.ox = this.attr("x");
                this.oy = this.attr("y");

                this.box.ow = this.box.attr("width");
                this.box.oh = this.box.attr("height");        
            },
            rmove = function (dx, dy) {
                // move will be called with dx and dy
                this.attr({x: this.ox + dx, y: this.oy + dy});
                this.box.attr({width: this.box.ow + dx, height: this.box.oh + dy});
            };   



            var chart = r.g.barchart(5, 5, 200, 280, data, {stacked: false, type: "square"}).label(['a','b','c']);


            chart.drag(move, start, up);


            chart.hover(function() {
                // Create a popup element on top of the bar
                this.flag = r.g.popup(this.bar.x, this.bar.y, (this.bar.value || "0") + "%").insertBefore(this);
            }, function() {
                // hide the popup element with an animation and remove the popup element at the end
                this.flag.animate({opacity: 0}, 300, function () {this.remove();});
            });

            /*
             * Define the default text attributes before writing the labels
             */
            r.g.txtattr = {font:"12px Fontin-Sans, Arial, sans-serif", fill:"#000", "font-weight": "bold"};


            // iterate over all the bar
            for (var i = 0; i < chart.bars[0].length; i++) {
                var bar = chart.bars[0][i];
                // if the value of the bar is greater or equals to 15 we change the color to red
                if (bar.value >= 15) {
                    bar.attr("fill", "#bf2f2f");
                    bar.attr("stroke", "#bf2f2f");
                }
            }

        }

任何形式的帮助将不胜感激。

提前致谢

jquery拖动并调整条形图

0 个答案: