ゲージの文字盤で画像の使用

ゲージの文字盤は、色、Raphael 描画、または画像を使用して作成できます。

クイックスタートの例を基に、face オプションを使用して、ゲージの文字盤で使用する画像ファイルを指定できます。

HTML ファイルの <head> セクションで、ドキュメントの ready 関数を含むスクリプトを以下のスクリプトに置き換えます。このスクリプトは、Raphael 描画を使用して、使用する画像の URL を指定するテンプレート関数を作成します。この例の ui という名前の引数は、JSON オブジェクトです。このオブジェクトには、キャンバスとなる Raphael ペーパーオブジェクトがあり、Raphael ペーパーの image メソッドを使用しています。このメソッドは、source、x、y、width、height の５つのパラメータを受け取ります。詳細については、Raphael のマニュアルを参照してください。また、radius を 120 ピクセルに設定して、画像の白い領域内にレンダリングします。

ドロップダウンからスクリプトをコピーして、<head> セクション内に貼り付けます

HTML ファイルの <body> セクションを変更する必要はありません。このゲージを作成するには、基本的な <div> タグで十分です。
HTML ファイルを保存し、それをブラウザで開きます。このゲージは、実際のウィジェットで次のように表示されます。ゲージの文字盤としてディナープレートが表示されます。

関連トピック

参照