2

解析され、jqplot で棒グラフを生成するために使用されるデータ テーブルがあります。テーブル行がホバーされたときに特定のバーを強調表示できるようにしたい。

jqplotDataHighlight および jqplotDataUnhighlight イベントにフックするだけです。それを回避する方法はありますか？

4

2 に答える 2

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);
}
于 2012-05-21T11:38:51.970 に答える
1

自分で解決できてよかったね、ニコライ。

ただし、別のアプローチを提案したいと思います。蛍光ペン スクリプトの変更を伴わないもの。あなたのニーズに合わせて採用できる私の解決策は、同様の問題に対する私の回答に示されています。

私のアプローチを提示するjsfiddleへの直接リンク。

于 2012-05-21T13:05:40.047 に答える