2

垂直方向と水平方向の間で方向を変更できるjqPlot折れ線グラフを作成したいと思います。チャートを含むdiv要素を回転させることにより、CSSルールを使用してこれを実現することができました。

これまでの私の仕事：http：//jsfiddle.net/GayashanNA/A4V4y/14/

しかし、問題は、方向を反転した後、チャート上のポイントのマウスポインターとマウスクリックを追跡したいということです。これらのポイントに注釈を付けたいからです。チャートが垂直方向の場合、これを行うことができません。誰かがこれを行う方法を提案できますか？それとも私は間違った方法で問題に取り組んでいますか？

（注：これは水平方向で行うことができます。上のグラフのポイントをクリックしようとすると、それを観察できます。）

おかげで、助けていただければ幸いです。

4

2 に答える 2

2

jqPlotを使用したことはありませんが、カーソルプラグインがマウスの位置を使用して線を描画する場所を決定し、rotate（で変換しても要素のサイズが変わらないため、問題はcssrotate（）を使用しようとしていると思います。 ）、それはまだ同じ幅と高さの値を持っています。

コードを見ると、次のことがわかります。

if (c.showVerticalLine) {
    c.shapeRenderer.draw(ctx, [[gridpos.x, 0], [gridpos.x, ctx.canvas.height]]);
}
if (c.showHorizontalLine) {
    c.shapeRenderer.draw(ctx, [[0, gridpos.y], [ctx.canvas.width, gridpos.y]]);
}

したがって、ライブラリは常に元の要素上のマウスの位置に基づいて線を描画しているように見えます。もちろん、rotate（）で変換した後の位置とは一致せず、回転後にXY座標がYXに変換されます。 （）。
元の要素のサイズを変更しようとしますが、ライブラリでラベルを描画する側を指定できるかどうかはわかりません。

于 2012-09-12T15:44:37.650 に答える
2

私はついに問題の解決策を見つけました。しかし、これを実現するには、jqPlotライブラリを変更する必要がありました。同じ問題に遭遇した他の人を助けるために、私はここに私の解決策を置きます。

まず、コアライブラリであるjquery.jqplot.jsファイルのjqPlotクラスに次のコードを挿入する必要がありました。

function jqPlot() {
    //add the following code segment
    var verticallyOriented = false;
    this.setVertical = function(state){
        verticallyOriented = state;
    }
    //don't change other code that isn't mentioned here

    //now you have to change the logic in the getEventPosition function
    //to make sure the new orientation is detected
    function getEventPosition(ev) {
        //change the line starting with var gridPos = ...
        //to the following code segment
        //depending on the orientation the event position calculating algorithm is changed
        if(verticallyOriented){
            var gridPos = {x:ev.pageY - go.top , y:plot.eventCanvas._elem.height() - ev.pageX + go.left};
        } else {
            var gridPos = {x:ev.pageX - go.left, y:ev.pageY - go.top};
        }
        //no change to other code is needed
    }
}

ここで実際の例を見ることができます：http：//jsfiddle.net/GayashanNA/yZwxu/

変更されたライブラリファイルの要点：https ：//gist.github.com/3755694

私が何か間違ったことをした場合は私を訂正してください。

ありがとう。

于 2012-09-20T13:00:29.203 に答える