ゲージ

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. ゲージのパラメータを持つオブジェクト

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

ゲージのパラメータ

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

Parameter	Type	Default	Description
el	HTMLElement string		ゲージの要素。HTML要素、またはゲージ要素のCSSセレクタを含む文字列。生成されたSVGはこの要素に挿入されます。
type	string	circle	ゲージのタイプ。circle`または`semicircle`のいずれか。
value	number	0	ゲージの値/パーセンテージ。0 `から` 1` の間の数値でなければなりません。
size	number	200	生成されるSVGイメージのサイズ (px単位)。
bgColor	string	transparent	ゲージの背景色。例えば、`#ff00ff`, `rgb(0,0,255)` などです。
borderBgColor	string	#eeeeee	メインフレーム/ストロークの背景色
borderColor	string	#000000	メインフレーム／ストロークの色
borderWidth	string	10	メインフレーム/ストロークの幅
valueText	string	null	ゲージ値テキスト（ゲージ中央の大きなテキスト
valueTextColor	string	#000000	値のテキストの色
valueFontSize	string	31	値のテキストのフォントサイズ
valueFontWeight	string	500	数値テキストのフォントの太さ
labelText	string	null	ゲージの追加ラベルテキスト
labelTextColor	string	#888888	ラベルテキストの色
labelFontSize	string	14	ラベルのフォントサイズ
labelFontWeight	string	400	ラベルテキストのフォントの重さ
on	object		イベントハンドラーを持つオブジェクト。例えば、以下のようになります。 `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 イベント

Event	Target	Description
gauge:beforedestroy	Gauge Element<div class="gauge">	Event will be triggered right before Gauge instance will be destroyed

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

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

Event	Arguments	Target	Description
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>