如何將爆炸效果添加到JQplot餅圖？

我使用「JqPlot」圖表繪製了使用「jqplot.pieRenderer.js」繪製餅圖的圖表;使用「jqplot.pieRenderer.js」如何將爆炸效果添加到JQplot餅圖？

庫;我的要求是什麼，只要點擊圓形切片應該爆炸

本場景：jqplot example點擊在任何片[它不會爆炸]

我想要什麼：highcharts example [看看如何在點擊每個餅爆炸]

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

現在點擊它顯示顏色。但我想爆炸它

是否有可能，如果沒有請解釋我的原因？我很卡， here是我jqplot

來源

2013-07-06 Vinod Louis

雅這裏是小提琴當餡餅點擊它現在顯示的顏色，我想爆炸的那部分http://jsfiddle.net/vinodlouis/Gb7Lt/4/ –

這裏編輯我的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(); 
}

來源

2013-07-09 08:38:42

涼爽。作品般的魅力.. –

莫非你請建議如果我們想要名稱而不是百分比的圖例，該怎麼辦？你可以更新jsfiddle –

@eraj這裏更新的小提琴http：// jsfiddle。net/waamit14/UmT5G/23/ –

小提琴嘿我試圖解決同樣的問題沒有成功，但但如果ü想嘗試自己從這裏開始編輯「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; 
       } 
     );

這不是結束.. 我仍然在它如果我得到解決方案，我將編輯這個謝謝！

來源

2013-07-08 14:48:39

如何將爆炸效果添加到JQplot餅圖？

回答

相關問題