スポンサースポンサーになる

ゲージ

Framework7にはゲージコンポーネントが付属しています。これは、見栄えの良い、完全にレスポンシブなSVGゲージを生成します。

ゲージのレイアウト

ゲージのSVGはJavaScriptによって生成されるため、そのHTMLレイアウトは可能な限りシンプルです

<!-- Gauge element -->
<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セレクター付き)。ゲージ要素。

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

app.gauge.update(parameters)- 渡されたパラメーターに従ってゲージSVGを更新/再描画する

  • parameters - object。ゲージパラメーターを含むオブジェクト

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

ゲージのパラメーター

ゲージを作成するために必要な使用可能なパラメーターのリストを見てみましょう

パラメーター型デフォルト説明
elHTMLElement
string		ゲージ要素。HTMLElementまたはゲージ要素のCSSセレクター付きの文字列。生成されたSVGはこの要素に挿入されます
typestringcircleゲージタイプ。circleまたはsemicircleにできます
valuenumber0ゲージ値/パーセンテージ。0から1の間の数値である必要があります
sizenumber200数値
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変数など）があります

プロパティ
gauge.appグローバルアプリインスタンスへのリンク
gauge.elゲージのHTML要素
gauge.$elゲージのHTML要素を持つDom7インスタンス
gauge.svgElゲージで生成されたSVG HTML要素
gauge.$svgEl生成されたSVG HTML要素を持つDom7インスタンス
gauge.paramsゲージのパラメーター
メソッド
gauge.update(parameters)

渡されたパラメーターに従って、ゲージのSVG要素を更新/再描画します。ゲージの初期化に必要な同じパラメーターを持つオブジェクトを受け入れます。更新する必要のあるパラメーターのみを渡すことができます。例:

var gauge = app.gauge.create({
  value: 0.5,
  // ...
});

// and when we need to update rendered SVG based on new value:
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イベント

イベントターゲット説明
gauge:beforedestroyゲージ要素<div class="gauge">イベントは、ゲージインスタンスが破棄される直前にトリガーされます

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

ゲージインスタンスは、自身のインスタンスとアプリインスタンスの両方でイベントを発生させます。アプリインスタンスのイベントには、gaugeがプレフィックスとして付いた同じ名前があります。

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

ゲージの自動初期化

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

<!-- Add gauge-init class, and specify parameters in data- attributes -->
<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,
});

例

gauge.html
<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner sliding">
        <div class="title">Gauge</div>
      </div>
    </div>
    <div class="page-content">
      <div class="block block-strong-ios block-outline-ios">
        <p>Framework7 comes with Gauge component. It produces nice looking fully responsive SVG gauges.</p>
      </div>
      <div class="block block-strong-ios block-outline-ios text-align-center">
        <div class="gauge demo-gauge"></div>
        <p class="segmented segmented-raised">
          <a class="button ${gaugeValue === 0 ? 'button-active' : ''}" @click=${()=> setGaugeValue(0)}>0%</a>
          <a class="button ${gaugeValue === 25 ? 'button-active' : ''}" @click=${()=>
            setGaugeValue(25)}>25%</a>
          <a class="button ${gaugeValue === 50 ? 'button-active' : ''}" @click=${()=>
            setGaugeValue(50)}>50%</a>
          <a class="button ${gaugeValue === 75 ? 'button-active' : ''}" @click=${()=>
            setGaugeValue(75)}>75%</a>
          <a class="button ${gaugeValue === 100 ? 'button-active' : ''}" @click=${()=>
            setGaugeValue(100)}>100%</a>
        </p>
      </div>
      <div class="block-title">Circle Gauges</div>
      <div class="block block-strong-ios block-outline-ios">
        <div class="grid grid-cols-2 grid-gap">
          <div class="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="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-ios block-outline-ios">
        <div class="grid grid-cols-2 grid-gap">
          <div class="text-align-center">
            <div class="gauge gauge-init" data-type="semicircle" data-value="0.3" data-value-text="30%"
              data-value-text-color="#f44336" data-border-color="#f44336"></div>
          </div>
          <div class="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"
              data-label-text-color="#333"></div>
          </div>
        </div>
      </div>
      <div class="block-title">Customization</div>
      <div class="block block-strong-ios block-outline-ios">
        <div class="grid grid-cols-2 grid-gap">
          <div class="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" data-bg-color="#ffeb3b">
            </div>
          </div>
          <div class="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="grid grid-cols-2 grid-gap">
          <div class="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" data-border-bg-color="transparent"></div>
          </div>
          <div class="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" data-border-width="10"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default (props, { $f7, $onMounted, $onBeforeUnmount, $update }) => {
    let gaugeValue = 50;
    let demoGauge;

    $onMounted(() => {
      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',
      });
    })

    $onBeforeUnmount(() => {
      demoGauge.destroy();
    })

    function setGaugeValue(value) {
      gaugeValue = value;
      demoGauge.update({
        value: value / 100,
        valueText: value + '%',
      });
      $update();
    }

    return $render;
  }
</script>
このドキュメントを改善する
このページについて