ゲージの文字盤でグラデーションの使用

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

クイックスタートの例を基に、face オプションを使用して、ゲージの文字盤で使用するグラデーション色を持つ円を描画できます。

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

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

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

関連トピック

参照