ゲージVueコンポーネント

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

ゲージコンポーネント

以下のコンポーネントが含まれています。

f7-gauge (ゲージ)

ゲージのプロパティ

Prop	Type	Default	Description
id	string		ゲージ要素のID属性
type	string	circle	ゲージのタイプ。circle `または` semicircle` になります。
value	number	0	ゲージの値/パーセンテージ。0 `から` 1` の間の数値でなければなりません。
size	number	200	生成されるSVGイメージのサイズ(px)
bg-color	string	transparent	ゲージの背景色。例えば、`#ff00ff`, `rgb(0,0,255)` などです。
border-bg-color	string	#eeeeee	メインフレーム/ストロークの背景色
border-color	string	#000000	メインフレーム／ストロークの色
border-width	string	10	メインフレーム/ストロークの幅
value-text	string	null	ゲージ値テキスト（ゲージ中央の大きなテキスト
value-text-color	string	#000000	値のテキストの色
value-font-size	string	31	値のテキストのフォントサイズ
value-font-weight	string	500	数値テキストのフォントの太さ
label-text	string	null	ゲージの追加ラベルテキスト
label-text-color	string	#888888	ラベルテキストの色
label-font-size	string	14	ラベルのフォントサイズ
label-font-weight	string	400	ラベルテキストのフォントウェイト

Examples

<template>
<f7-page>
  <f7-navbar title="Gauge"></f7-navbar>

  <f7-block strong class="text-align-center">
    <f7-gauge
      type="circle"
      :value="gaugeValue"
      :size="250"
      border-color="#2196f3"
      :border-width="10"
      :value-text="`${gaugeValue * 100}%`"
      :value-font-size="41"
      value-text-color="#2196f3"
      label-text="amount of something"
    ></f7-gauge>
    <f7-segmented tag="p" raised>
      <f7-button @click="() => gaugeValue = 0">0%</f7-button>
      <f7-button @click="() => gaugeValue = 0.25">25%</f7-button>
      <f7-button @click="() => gaugeValue = 0.5">50%</f7-button>
      <f7-button @click="() => gaugeValue = 0.75">75%</f7-button>
      <f7-button @click="() => gaugeValue = 1">100%</f7-button>
    </f7-segmented>
  </f7-block>

  <f7-block-title>Circle Gauges</f7-block-title>
  <f7-block strong>
    <f7-row>
      <f7-col class="text-align-center">
        <f7-gauge
          type="circle"
          :value="0.44"
          value-text="44%"
          value-text-color="#ff9800"
          border-color="#ff9800"
        ></f7-gauge>
      </f7-col>
      <f7-col class="text-align-center">
        <f7-gauge
          type="circle"
          :value="0.12"
          value-text="$120"
          value-text-color="#4caf50"
          border-color="#4caf50"
          label-text="of $1000 budget"
          label-text-color="#f44336"
          :label-font-weight="700"
        ></f7-gauge>
      </f7-col>
    </f7-row>
  </f7-block>
  <f7-block-title>Semicircle Gauges</f7-block-title>
  <f7-block strong>
    <f7-row>
      <f7-col class="text-align-center">
        <f7-gauge
          type="semicircle"
          :value="0.3"
          value-text="30%"
          value-text-color="#f44336"
          border-color="#f44336"
        ></f7-gauge>
      </f7-col>
      <f7-col class="text-align-center">
        <f7-gauge
          type="semicircle"
          :value="0.5"
          value-text="30kg"
          value-text-color="#e91e63"
          border-color="#e91e63"
          label-text="of 60kg total"
          label-text-color="#333"
        ></f7-gauge>
      </f7-col>
    </f7-row>
  </f7-block>
  <f7-block-title>Customization</f7-block-title>
  <f7-block strong>
    <f7-row>
      <f7-col class="text-align-center">
        <f7-gauge
          type="circle"
          :value="0.35"
          value-text="35%"
          value-text-color="#4caf50"
          :valueFontSize="51"
          :valueFontWeight="700"
          :border-width="20"
          border-color="#4caf50"
          border-bg-color="#ffeb3b"
          bg-color="#ffeb3b"
        ></f7-gauge>
      </f7-col>
      <f7-col class="text-align-center">
        <f7-gauge
          type="circle"
          :value="0.67"
          value-text="$670"
          value-text-color="#000"
          border-color="#ff9800"
          label-text="of $1000 spent"
          label-text-color="#4caf50"
          :label-font-weight="800"
          :label-font-size="12"
          :border-width="30"
        ></f7-gauge>
      </f7-col>
    </f7-row>
    <br />
    <f7-row>
      <f7-col class="text-align-center">
        <f7-gauge
          type="semicircle"
          :value="0.5"
          value-text="50%"
          value-text-color="#ffeb3b"
          :valueFontSize="41"
          :valueFontWeight="700"
          :border-width="10"
          border-color="#ffeb3b"
          border-bg-color="transparent"
        ></f7-gauge>
      </f7-col>
      <f7-col class="text-align-center">
        <f7-gauge
          type="semicircle"
          :value="0.77"
          border-color="#ff9800"
          label-text="$770 spent so far"
          label-text-color="#ff9800"
          :label-font-weight="800"
          :label-font-size="12"
          :border-width="10"
        ></f7-gauge>
      </f7-col>
    </f7-row>
  </f7-block>
</f7-page>
</template>

<script>
  export default {
    data() {
      return {
        gaugeValue: 0.5,
      };
    },
  }
</script>