2

HTML5キャンバスを使用して線または棒グラフを描画したいと思います。

私はしたいと思います

  • 外部ソースからデータを取り込む（またはテスト目的でハードコーディングする）

  • グラフを描く

  • ノード/バーにカーソルを合わせると、ツールチップが表示され、番号/関連データが表示されます。

だから私の質問は、キャンバス上の個々の画像/線/何かにツールチップを適用することは可能ですか？（キャンバス自体が独自のツールチップを持つことができることを私は知っています）

私が確実に機能する解決策の1つは、各ノードを独自のツールチップと画像を使用して個別のキャンバスにすることですが、それは少し過剰に聞こえます。

理想的にはjquery.ui.tooltipを使用したいのですが、実際には何かが機能するかどうかを知りたいだけです。

    var imageObj = new Image();
    $(imageObj).attr("title","kitten");
    $(imageObj).tooltip();

    imageObj.onload = function(){
    context.drawImage(imageObj, destX, destY, destWidth, destHeight);
    };
    imageObj.src = "BW-kitten.jpg";

ここから概要を入手し、うまくいくと思うものを追加しました。

子猫はきちんと描画し、コンソールエラーやそのすべての良いものはありません。

4

1 に答える 1

2

HTML5（より良い言葉がないため）の形状はキャンバスに描画され、技術的には存在しません。カスタムハンドラーを使用してこれらの形状の正確な位置を管理し、通常のDOM要素と同様の機能を追加するプラグインがいくつかあります。

私はHTML5プロジェクトでKineticJSを使用しています。これは、通常の形状の単純さに従い、複雑な形状を簡単に実現できるためです。これは、形状にツールチップを追加するKineticJSの例です。

ドキュメントから使用Kinetic.Imageして、画像をステージに簡単に追加できます。また、ツールチップを図形に追加する方法については、前にリンクした例に従ってください。

于 2012-03-23T16:31:51.123 に答える