スポンサー
Support Framework7

ゲージ

    Framework7にはGaugeコンポーネントが付属しています。完全にレスポンシブなSVGゲージを作成することができます。

    ゲージのレイアウト

    GaugeのSVGはJavaScriptで生成されるため、HTMLのレイアウトは可能な限りシンプルになっています。

    <!-- ゲージ要素 -->
    <div class="gauge"></div>

    ゲージアプリのメソッド

    次に、ゲージを作成/初期化する必要があります。ゲージを扱うアプリの関連メソッドを見てみましょう。

    app.gauge.create(parameters)- ゲージのインスタンス作成

    • parameters - object. ゲージのパラメータを持つオブジェクト

    作成したゲージのインスタンスを返すメソッド

    app.gauge.destroy(el)- ゲージのインスタンスの破棄

    • el - HTMLElementまたはstring(CSSセレクタ付き)またはobject。壊すゲージ要素またはゲージインスタンス。

    app.gauge.get(el)- ゲージのインスタンスをHTML要素で取得

    • el - HTMLElement または string (CSS Selectorを使用). ゲージの要素です。

    メソッドはゲージのインスタンスを返します。

    app.gauge.update(parameters)- 渡されたパラメータに応じてゲージのSVGを更新・レンダリングします。

    • parameters - object. ゲージのパラメータを持つオブジェクト

    メソッドはゲージの値を返す

    ゲージのパラメータ

    ここでは、ゲージを作成するために必要なパラメータの一覧を見てみましょう。

    ParameterTypeDefaultDescription
    elHTMLElement
    string
    ゲージの要素。HTML要素、またはゲージ要素のCSSセレクタを含む文字列。生成されたSVGはこの要素に挿入されます。
    typestringcircleゲージのタイプ。circleまたはsemicircle`のいずれか。
    valuenumber0ゲージの値/パーセンテージ。0 から 1` の間の数値でなければなりません。
    sizenumber200生成されるSVGイメージのサイズ (px単位)。
    bgColorstringtransparentゲージの背景色。例えば、#ff00ff, rgb(0,0,255) などです。
    borderBgColorstring#eeeeeeメインフレーム/ストロークの背景色
    borderColorstring#000000メインフレーム/ストロークの色
    borderWidthstring10メインフレーム/ストロークの幅
    valueTextstringnullゲージ値テキスト(ゲージ中央の大きなテキスト
    valueTextColorstring#000000値のテキストの色
    valueFontSizestring31値のテキストのフォントサイズ
    valueFontWeightstring500数値テキストのフォントの太さ
    labelTextstringnullゲージの追加ラベルテキスト
    labelTextColorstring#888888ラベルテキストの色
    labelFontSizestring14ラベルのフォントサイズ
    labelFontWeightstring400ラベルテキストのフォントの重さ
    onobject

    イベントハンドラーを持つオブジェクト。例えば、以下のようになります。

    var gauge = app.gauge.create({
      el: '.gauge',
      value: 33,
      valueText: '33%',
      on: {
        beforeDestroy: function () {
          console.log('Gauge will be destroyed')
        }
      }
    })
    

    ゲージのメソッドとプロパティ

    ゲージを作成するには、以下のように呼び出さなければなりません。

    var gauge = app.gauge.create({ /* parameters */ })

    その後、初期化されたインスタンス(上の例では gauge という変数)に、便利なメソッドやプロパティが追加されます。

    Properties
    gauge.appグローバルアプリのインスタンスへのリンク
    gauge.elゲージのHTML要素
    gauge.$elゲージのあるDom7インスタンスのHTML要素
    gauge.svgElゲージで生成されたSVG HTML要素
    gauge.$svgEl生成されたSVG HTML要素を持つDom7のインスタンス
    gauge.paramsゲージのパラメータ
    Methods
    gauge.update(parameters)渡されたパラメータに従って、ゲージ SVG 要素を更新/レンダリングします。ゲージの初期化に必要なパラメータと同じパラメータを持つオブジェクトを受け取ります。更新する必要のあるパラメータのみを渡すことができます。
    var gauge = app.gauge.create({
      value: 0.5,
      // ...
    });
    
    // といったように、新しい値に基づいてレンダリングされたSVGを更新する必要がある場合に使用します。
    gauge.update({
      value: 0.6,
    });
    gauge.destroy()ゲージのインスタンスを破棄します。
    gauge.on(event, handler)イベントハンドラの追加
    gauge.once(event, handler)発生後に削除されるイベントハンドラの追加
    gauge.off(event, handler)イベントハンドラの削除
    gauge.off(event)指定されたイベントのハンドラをすべて削除
    gauge.emit(event, ...args)インスタンスでのイベント発生

    ゲージのイベント

    ゲージでは、以下のDOMイベントがゲージ要素で、イベントがアプリとゲージのインスタンスで発生します。

    DOM イベント

    EventTargetDescription
    gauge:beforedestroyGauge Element<div class="gauge">Event will be triggered right before Gauge instance will be destroyed

    アプリとゲージのインスタンスのイベント

    ゲージのインスタンスは、自己のインスタンスとアプリのインスタンスの両方に対してイベントを発行します。アプリのインスタンスのイベントは、同じ名前でプレフィックスとして gauge が付きます。

    EventArgumentsTargetDescription
    beforeDestroy(gauge)gaugeイベントは、ゲージのインスタンスが破棄される直前に発生します。イベントハンドラは、引数としてゲージのインスタンスを受け取ります。
    gaugeBeforeDestroy(gauge)app

    ゲージの自動初期化

    ゲージAPIを使用する必要がなく、ゲージがページ内にあり、ページの初期化時にDOMに表示される場合は、追加の gauge-init クラスを追加して、すべてのパラメータを data- 属性で指定するだけで、ゲージを自動初期化できます。

    <!-- gauge-initクラスを追加し、data-属性でパラメータを指定します。 -->
    <div
      class="gauge gauge-init my-gauge"
      data-type="circle"
      data-value="0.44"
      data-value-text="44%"
      data-value-text-color="#ff9800"
      data-border-color="#ff9800"
    ></div>

    この場合、自動的に生成されたゲージのインスタンスにアクセスする必要がある場合は、app.gauge.getアプリメソッドを使用します。

    var gauge = app.gauge.get('.my-gauge');
    
    gauge.update({
      value: 0.9,
    });
    

    Examples

    <template>
      <div class="page">
        <div class="navbar">
          <div class="navbar-bg"></div>
          <div class="navbar-inner">
            <div class="title">Gauge</div>
          </div>
        </div>
        <div class="page-content">
          <div class="block block-strong text-align-center">
            <div class="gauge demo-gauge"></div>
            <p class="segmented segmented-raised">
              <a href="#" class="button" data-value="0">0%</a>
              <a href="#" class="button" data-value="25">25%</a>
              <a href="#" class="button" data-value="50">50%</a>
              <a href="#" class="button" data-value="75">75%</a>
              <a href="#" class="button" data-value="100">100%</a>
            </p>
          </div>
          <div class="block-title">Circle Gauges</div>
          <div class="block block-strong">
            <div class="row">
              <div class="col text-align-center">
                <div class="gauge gauge-init"
                  data-type="circle"
                  data-value="0.44"
                  data-value-text="44%"
                  data-value-text-color="#ff9800"
                  data-border-color="#ff9800"
                ></div>
              </div>
              <div class="col text-align-center">
                <div class="gauge gauge-init"
                  data-type="circle"
                  data-value="0.12"
                  data-value-text="$120"
                  data-value-text-color="#4caf50"
                  data-border-color="#4caf50"
                  data-label-text="of $1000 budget"
                  data-label-text-color="#f44336"
                  data-label-font-weight="700"
                ></div>
              </div>
            </div>
          </div>
          <div class="block-title">Semicircle Gauges</div>
          <div class="block block-strong">
            <div class="row">
              <div class="col text-align-center">
                <div class="gauge gauge-init"
                  data-type="semicircle"
                  data-value="0.3"
                  data-value-text="30%"
                  data-value-text-color="#f44336"
                ></div>
              </div>
              <div class="col text-align-center">
                <div class="gauge gauge-init"
                  data-type="semicircle"
                  data-value="0.5"
                  data-value-text="30kg"
                  data-value-text-color="#e91e63"
                  data-border-color="#e91e63"
                  data-label-text="of 60kg total"
                ></div>
              </div>
            </div>
          </div>
          <div class="block-title">Customization</div>
          <div class="block block-strong">
            <div class="row">
              <div class="col text-align-center">
                <div class="gauge gauge-init"
                  data-type="circle"
                  data-value="0.35"
                  data-value-text="35%"
                  data-value-text-color="#4caf50"
                  data-value-font-size="51"
                  data-value-font-weight="700"
                  data-border-width="20"
                  data-border-color="#4caf50"
                  data-border-bg-color="#ffeb3b"
                ></div>
              </div>
              <div class="col text-align-center">
                <div class="gauge gauge-init"
                  data-type="circle"
                  data-value="0.67"
                  data-value-text="$670"
                  data-value-text-color="#000"
                  data-border-color="#ff9800"
                  data-label-text="of $1000 spent"
                  data-label-text-color="#4caf50"
                  data-label-font-weight="800"
                  data-label-font-size="12"
                  data-border-width="30"
                ></div>
              </div>
            </div>
            <br />
            <div class="row">
              <div class="col text-align-center">
                <div class="gauge gauge-init"
                  data-type="semicircle"
                  data-value="0.5"
                  data-value-text="50%"
                  data-value-text-color="#ffeb3b"
                  data-value-font-size="41"
                  data-value-font-weight="700"
                  data-border-width="10"
                  data-border-color="#ffeb3b"
                ></div>
              </div>
              <div class="col text-align-center">
                <div class="gauge gauge-init"
                  data-type="semicircle"
                  data-value="0.77"
                  data-border-color="#ff9800"
                  data-label-text="$770 spent so far"
                  data-label-text-color="#ff9800"
                  data-label-font-weight="800"
                  data-label-font-size="12"
                ></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </template>
    <script>
      export default (props, { $, $f7, $on }) => {
        $on('pageInit', () => {
          // Init top demo gauge
          var demoGauge = $f7.gauge.create({
            el: '.demo-gauge',
            type: 'circle',
            value: 0.5,
            size: 250,
            borderColor: '#2196f3',
            borderWidth: 10,
            valueText: '50%',
            valueFontSize: 41,
            valueTextColor: '#2196f3',
            labelText: 'amount of something',
          });
    
          // Change demo gauge on button click
          $('.button').on('click', function () {
            var value = $(this).attr('data-value');
            demoGauge.update({
              value: value / 100,
              valueText: value + '%'
            });
          });
        })
        return $render;
      }
    </script>