2

我有一个已解析的数据表，用于生成带有 jqplot 的条形图。我希望能够在表格行悬停时突出显示特定栏。

突出显示周围的方式很容易 - 只需连接到 jqplotDataHighlight 和 jqplotDataUnhighlight 事件。任何想法如何做到这一点？

4

2 回答 2

1

我把它钉牢了。

我已经扩展了位于 jqplot.highight.js 中的 Highlighter 对象，这样我们就可以从库外部突出显示和取消突出显示。

Sill 这可用于任何高光，但应检测渲染器。我没有花时间这样做。

$.jqplot.Highlighter.highlightBar = function(plot, serIndex, barId, barXVal, barYVal) {
    //We just use the showTooltip. Simple!
    var neighbor = {
        seriesIndex: serIndex,
        pointIndex: barId,
        data: {
            0: barXVal,
            1: barYVal
        },
        gridData: plot.series[serIndex].gridData[barId],
        points: plot.series[serIndex]._barPoints[barId]
    }
    showTooltip(plot, plot.series[serIndex], neighbor);
    barHighlight(plot, serIndex, barId, neighbor.points);

}

function barHighlight(plot, sidx, pidx, points) {
    var s = plot.series[sidx];
    var canvas = plot.plugins.barRenderer.highlightCanvas;
    canvas._ctx.clearRect(0,0,canvas._ctx.canvas.width, canvas._ctx.canvas.height);
    s._highlightedPoint = pidx;
    plot.plugins.barRenderer.highlightedSeriesIndex = sidx;
    var opts = {fillStyle: s.highlightColors[pidx]};
    s.renderer.shapeRenderer.draw(canvas._ctx, points, opts);
    canvas = null;
}

function barUnhighlight(plot) {
    var canvas = plot.plugins.barRenderer.highlightCanvas;
    canvas._ctx.clearRect(0,0, canvas._ctx.canvas.width, canvas._ctx.canvas.height);
    for (var i=0; i<plot.series.length; i++) {
        plot.series[i]._highlightedPoint = null;
    }
    plot.plugins.barRenderer.highlightedSeriesIndex = null;
    plot.target.trigger('jqplotDataUnhighlight');
    canvas =  null;
}

$.jqplot.Highlighter.clearHighlight = function (plot) {
    barUnighlight(plot);
}
于 2012-05-21T11:38:51.970 回答
1

很高兴你设法自己解决了，Nickolay。

不过，我想提出一种不同的方法。不涉及更改荧光笔脚本的一种。我对类似问题的回答中介绍了您可以根据需要采用的解决方案。

直接链接到 jsfiddle 展示我的方法。

于 2012-05-21T13:05:40.047 回答