face オプション

ゲージのフェースと背景領域に使用する画像または形状を設定または描画します。

シンタックス

Javascript (Usage)
$(function () { //値を取得する var returnsValue; //タイプ： wijmo.gauge.gauge_face returnsValue = $(".selector").wijgauge("option", "face"); //値を設定します var newValue; //タイプ： wijmo.gauge.gauge_face $(".selector").wijgauge("option", "face", newValue); });

Javascript (Usage)

$(function () {
    
    //値を取得する
    var returnsValue; //タイプ： wijmo.gauge.gauge_face
    returnsValue = $(".selector").wijgauge("option", "face");
    
    //値を設定します
    var newValue; //タイプ： wijmo.gauge.gauge_face
    $(".selector").wijgauge("option", "face", newValue);
        
});

Javascript (Specification)
var face : gauge_face;

使用例

Javascript

// 以下のサンプルでは、ゲージのフェースにカスタム画像を使用します。このサンプルで ui という名前を付けた引数は JSON オブジェクトです。// このオブジェクトは Raphael ペーパーオブジェクトのキャンバスを持つため、Raphael ペーパーの image メソッドを使用します。// このメソッドは source、x、y、width、height の 5 個のパラメーターを受け取ります。詳細については、Raphael のドキュメントを参照してください。// また、半径を 120 ピクセルに設定し、画像の白い領域の中に半径をレンダリングします。$(document).ready(function () {$("#radialgauge1").wijradialgauge({ value: 90, radius: 120, face: { style: {}, template: function (ui) { var url = "images/customGaugeFace.png"; return ui.canvas.image(url, ui.origin.x -ui.r, ui.origin.y -ui.r, ui.r * 2, ui.r * 2); } }});});

解説

原点はゲージの中心にありますが、画像は左上から描画されるので、まず原点に基づいて左上の始点を計算し、さらにフェースの半径に基づいて幅と高さを計算します。フェースの半径は、幅と高さのうち小さい方の半分です。注: fill プロパティは Raphael フレームワークを使用して定義されます。詳細については、Raphael 要素の attr メソッドを参照してください。フェースは単色またはグラデーションで塗りつぶすことができます。デフォルトの塗りつぶしは、fill プロパティの r によって指定された放射状のグラデーションです。

関連トピック

参照