Javascript 如何将爆炸效果添加到JQplot饼图中？

我使用“JqPlot”图表通过“JqPlot.pieRenderer.js”绘制饼图

图书馆；我的要求是，每当单击饼图切片时，它都会爆炸

当前场景：单击任意一个切片[它不会爆炸]

我想要的：[看看每个派在点击时是如何爆炸的]

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

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

有可能吗？如果没有，请解释原因？我被卡住了，

---

我是jqplot的提琴吗？嘿，我正在尝试解决同样的问题，但还没有成功，但如果你想尝试一下，从这里开始 编辑 “jqplot.pierender.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（）函数中

也别忘了把它放进去

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

在你的html脚本中

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

这还没有结束。。 我还在忙

---

如果我得到解决方案，我将编辑此内容，谢谢

嘿，我正试图解决同样的问题，但还没有成功，但如果你想尝试一下自己，那就从这里开始吧 编辑 “jqplot.pierender.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（）函数中

也别忘了把它放进去

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

在你的html脚本中

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

这还没有结束。。 我还在忙

---

如果我得到解决方案，我将编辑此内容，谢谢

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

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

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();
}

---

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

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

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();
}

---

这是派点击时的提琴，它显示颜色，现在我想分解这部分。这是派点击时的提琴，它显示颜色，现在我想分解这部分。如果我们想要带名称而不是百分比的图例，你能建议怎么做吗？。你能更新jsfiddleYes吗？我得到了需要的东西。谢谢，如果我们想用名字而不是百分比来做图例，你能建议我们怎么做吗？。你能更新jsfiddleYes吗？我得到了需要的东西。谢谢