0

我正在使用“jqplot”图表通过“jqplot.pieRenderer.js”绘制饼图

图书馆; 我的要求是每当点击一个饼片时它应该爆炸

当前场景：jqplot 示例单击任何切片 [它不会爆炸]

我想要什么：highcharts 示例[查看每个饼图在点击时如何爆炸]

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

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

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

4

2 回答 2

3

在这里我编辑我的 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();
}
于 2013-07-09T08:38:42.650 回答
0

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

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-08T14:48:39.960 回答