Question

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

突出显示方式很简单 - 只需挂钩jqplotDataHighlight和jqplotDataUnhighlight事件即可。任何想法如何做到这一点？

Answer 1

我把它钉了下来。

我已经扩展了位于jqplot.highight.js中的Highlighter对象，因此它允许我们从库外突出显示和取消突出显示。

这可以用于任何突出显示，但应检测渲染器。我没有花时间这样做。

$.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);
}

Answer 2

很高兴你自己解决了这个问题，Nickolay。

我想提出一个不同的方法。一个不涉及对荧光笔脚本的更改。我可以根据您的需求采用的解决方案在my answer to a similar problem中提供。

Direct link to jsfiddle presenting my approach.

如何用javascript突出显示jqplot条形图

2 个答案: