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

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

---

突出显示方法很简单-只需连接到jqplotDataHighlight和jqplotDataUnhighlight事件。有什么办法吗？

我有点确定了

我已经扩展了jqplot.highlight.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);
}

$.jqplot.Highlighter.highlightBar=函数（plot、serIndex、barId、barXVal、barYVal）{
//我们只是使用showTooltip。简单！
var邻居={
系列索引：系列索引，
点索引：barId，
数据：{
0:barXVal，
1:barYVal
},
gridData:plot.series[serIndex].gridData[barId]，
点：绘图系列[serIndex]。_barPoints[barId]
}
显示工具提示（绘图，绘图系列[serIndex]，邻居）；
barHighlight（绘图、serIndex、barId、邻居点）；
}
功能条高亮显示（绘图、sidx、pidx、点）{
var s=绘图系列[sidx]；
var canvas=plot.plugins.barRenderer.highlightCanvas；
canvas.\u ctx.clearRect（0,0，canvas.\u ctx.canvas.width，canvas.\u ctx.canvas.height）；
s、 _highlightedPoint=pidx；
plot.plugins.barRenderer.highlightedSeriesIndex=sidx；
var opts={fillStyle:s.highlightColors[pidx]}；
s、 渲染器.shaperender.draw（画布、点、选项）；
canvas=null；
}
功能条取消高亮度（绘图）{
var canvas=plot.plugins.barRenderer.highlightCanvas；
canvas.\u ctx.clearRect（0,0，canvas.\u ctx.canvas.width，canvas.\u ctx.canvas.height）；
（var i=0；我很高兴你自己解决了这个问题，Nickolay

不过，我想提出一种不同的方法。一种不涉及对highlighter脚本进行更改的方法。中介绍了我的解决方案，您可以根据自己的需要采用它

到目前为止你做了什么？如果可以确定，请在JSFIDLE上展示一个示例。如果你感兴趣，可以查看答案。谢谢！嘿，Boro，你说得对，修改荧光灯的代码不是最佳实践，但我想重用showTooltip功能，因为它也是项目所需要的。我仍然有一个我第一次尝试使用你的例子：）。谢谢！