如何使用javascript突出顯示jqplot條形圖

Question

我有一個數據表，它被解析並用於使用jqplot生成條形圖。我希望能夠在表格行懸停時突出顯示特定的欄。

突出顯示的方法很簡單 - 只需連接到jqplotDataHighlight和jqplotDataUnhighlight事件即可。任何想法如何做到這一點？

Answer 1

我把它釘了下來。

我已經擴展了位於jqplot.highight.js中的熒光筆對象，所以它可以讓我們突出顯示並從庫外部取消高亮顯示。

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

Answer 2

不錯，你設法自己排除它，尼克萊。

雖然我想提出一種不同的方法。一個不涉及熒光筆腳本的更改。我可以根據您的需求採用的解決方案見my answer to a similar problem。

Direct link to jsfiddle presenting my approach.