Question

我正在使用“JqPlot”图表来绘制饼图，方法是使用“jqplot.pieRenderer.js”

文库;什么是我的要求是每当点击一个饼图时它应该爆炸

目前的情况：jqplot example点击任何切片[它不会爆炸]

我想要的是什么：highcharts example [看看每个馅饼在点击时如何爆炸]

$('#chart').bind('jqplotDataClick', function(ev, seriesIndex, pointIndex, data) {
    alert(plot.series[seriesIndex].seriesColors[pointIndex]);
});

现在点击它显示颜色。但我想爆炸它

是否可能，如果没有，请解释原因？我被卡住了， here是jqplot的小提琴

Answer 1

在这里我编辑我的js文件并制作fiddle

忘记我以前的回答我只需管理一个参数并更改特定饼图的半径和边距。

function handleClick(ev, gridpos, datapos, neighbor, plot) {

    if (neighbor) {
        var ins = [neighbor.seriesIndex, neighbor.pointIndex, neighbor.data];
        var evt = jQuery.Event('jqplotDataClick');
        evt.which = ev.which;
        evt.pageX = ev.pageX;
        evt.pageY = ev.pageY;
        plot.target.trigger(evt, ins);
        if($.jqplot.PieRenderer.prototype.selectedSlice == neighbor.pointIndex){
            unexpload(plot);
        }else{
            $.jqplot.PieRenderer.prototype.selectedSlice = neighbor.pointIndex;
            plot.replot();    
        }

    }else if (neighbor == null) {
        unexpload (plot);
    }
}

function unexpload(plot){
    $.jqplot.PieRenderer.prototype.selectedSlice = null;
    plot.destroy();
    plot.replot();
}

Answer 2

嘿，我正在努力解决同样的问题但还没有成功，但如果你想尝试自己从这里开始编辑 “jqplot.pieRenderer.js”它有一些逻辑来显示鼠标悬停和鼠标离开事件的高亮饼图我对我的馅饼爆炸遵循相同的逻辑。我在脚本中修改方法这就像创建一个画布一样爆炸就像高亮画布一样绑定click方法隐藏显示它。

function postPlotDraw() {
    // Memory Leaks patch    
    if (this.plugins.pieRenderer && this.plugins.pieRenderer.highlightCanvas) {
        this.plugins.pieRenderer.highlightCanvas.resetCanvas();
        this.plugins.pieRenderer.highlightCanvas = null;
    }

    if (this.plugins.pieRenderer && this.plugins.pieRenderer.exploadedCanvas) {
        this.plugins.pieRenderer.exploadedCanvas.resetCanvas();
        this.plugins.pieRenderer.exploadedCanvas = null;
    }

    this.plugins.pieRenderer = {highlightedSeriesIndex:null};
    this.plugins.pieRenderer = {exploadedSeriesIndex:null};

    this.plugins.pieRenderer.highlightCanvas = new $.jqplot.GenericCanvas();
    this.plugins.pieRenderer.exploadedCanvas = new $.jqplot.GenericCanvas();

    // do we have any data labels?  if so, put highlight canvas before those
    var labels = $(this.targetId+' .jqplot-data-label');
    if (labels.length) {
        $(labels[0]).before(this.plugins.pieRenderer.highlightCanvas.createElement(this._gridPadding, 'jqplot-pieRenderer-highlight-canvas', this._plotDimensions, this));
        $(labels[0]).before(this.plugins.pieRenderer.exploadedCanvas.createElement(this._gridPadding, 'jqplot-pieRenderer-exploaded-canvas', this._plotDimensions, this));
    }
    // else put highlight canvas before event canvas.
    else {
        this.eventCanvas._elem.before(this.plugins.pieRenderer.highlightCanvas.createElement(this._gridPadding, 'jqplot-pieRenderer-highlight-canvas', this._plotDimensions, this));
        this.eventCanvas._elem.before(this.plugins.pieRenderer.exploadedCanvas.createElement(this._gridPadding, 'jqplot-pieRenderer-exploaded-canvas', this._plotDimensions, this));
    }

    var hctx = this.plugins.pieRenderer.highlightCanvas.setContext();
    var ectx = this.plugins.pieRenderer.exploadedCanvas.setContext();

    this.eventCanvas._elem.bind('mouseleave', {plot:this}, function (ev) { unhighlight(ev.data.plot); });
}

这是我的点击功能

function handleClick(ev, gridpos, datapos, neighbor, plot) {
    unhighlight (plot);
    if (neighbor) {
        var ins = [neighbor.seriesIndex, neighbor.pointIndex, neighbor.data];
        var evt = jQuery.Event('jqplotDataClick');
        evt.which = ev.which;
        evt.pageX = ev.pageX;
        evt.pageY = ev.pageY;
        plot.target.trigger(evt, ins);
        var pidx = neighbor.pointIndex;
        var sidx = 0;
        var s = plot.series[sidx];
        var canvas = plot.plugins.pieRenderer.exploadedCanvas;
        canvas._ctx.clearRect(0,0,canvas._ctx.canvas.width, canvas._ctx.canvas.height);
        s._highlightedPoint = pidx;
        plot.plugins.pieRenderer.exploadedSeriesIndex = sidx;
        s.renderer.drawSlice.call(s, canvas._ctx, s._sliceAngles[pidx][0], s._sliceAngles[pidx][1],plot.seriesColors[pidx], false,sidx);
    }
}

并且drawSlice（）方法中的一些更改为爆炸切片索引添加了一个参数，然后在方法中使用它进行检查，只需添加更多边距等。这个方法有很长的代码，所以我不能在这里粘贴所有代码所以只粘贴这里改变的数据

if(sidx != null && sidx == $.jqplot.PieRenderer.prototype.selectedSlice){
            rprime = calcRPrime(ang1, ang2,this.sliceMargin+10, this.fill, this.lineWidth);
        }

和doDraw（）函数

if(sidx != null && sidx == $.jqplot.PieRenderer.prototype.selectedSlice){
            ctx.arc(0,0, rad+30, ang1, ang2, false);
            ctx.lineTo(0,0);
        }else{
            ctx.arc(0, 0, rad, ang1, ang2, false);
            ctx.lineTo(0,0);        
        }

也不要忘记放和

$.jqplot.PieRenderer.prototype.selectedSlice = null;

并在你的html脚本中

 $('#chart1').bind('jqplotDataClick',
            function (ev, seriesIndex, pointIndex, data) {                
                $.jqplot.PieRenderer.prototype.selectedSlice = seriesIndex;
                }
        );

这不是结束.. 我还在上面如果我得到解决方案，我将编辑此感谢!!

如何为JQplot饼图添加爆炸效果？

2 个答案: