贊助商成為贊助商

量表

Framework7 附帶量表元件。它會產生美觀且完全回應式的 SVG 量表。

量表配置

由於量表 SVG 是由 JavaScript 產生的，因此其 HTML 配置盡可能簡單

<!-- Gauge element -->
<div class="gauge"></div>

量表應用程式方法

現在我們需要建立/初始化量表。讓我們看看相關的應用程式方法，以使用量表

app.gauge.create(參數)- 建立量表執行個體

  • 參數 - 物件。具有量表參數的物件

方法傳回已建立的量表執行個體

app.gauge.destroy(el)- 銷毀量表執行個體

  • el - HTMLElement 或 字串（具有 CSS 選擇器）或 物件。要銷毀的量表元素或量表執行個體。

app.gauge.get(el)- 透過 HTML 元素取得量表執行個體

  • el - HTMLElement 或 字串（具有 CSS 選擇器）。量表元素。

方法傳回量表的執行個體

app.gauge.update(參數)- 根據傳遞的參數更新/重新呈現量表 SVG

  • 參數 - 物件。具有量表參數的物件

方法傳回量表值

量表參數

現在讓我們看看建立量表所需的可用參數清單

參數類型預設值說明
elHTMLElement
字串		量表元素。HTMLElement 或具有量表元素 CSS 選擇器的字串。產生的 SVG 將插入此元素
type字串circle量表類型。可以是 circle 或 semicircle
value數字0量表值/百分比。必須是 0 和 1 之間的數字
size數字200產生的 SVG 影像大小（以像素為單位）
bgColor字串透明儀表背景顏色。可以是任何有效的顏色字串，例如 #ff00ff、rgb(0,0,255) 等。
borderBgColor字串#eeeeee主要邊框/描邊背景顏色
borderColor字串#000000主要邊框/描邊顏色
borderWidth字串10主要邊框/描邊寬度
valueText字串null儀表數值文字（儀表中央的大文字）
valueTextColor字串#000000數值文字顏色
valueFontSize字串31數值文字字體大小
valueFontWeight字串500數值文字字體粗細
labelText字串null儀表附加標籤文字
labelTextColor字串#888888標籤文字顏色
labelFontSize字串14標籤文字字體大小
labelFontWeight字串400標籤文字字體粗細
on物件

具有事件處理常式的物件。例如

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 執行個體被銷毀前觸發

應用程式和 Gauge 執行個體事件

Gauge 執行個體會對自身執行個體和應用程式執行個體發出事件。應用程式執行個體事件具有相同的名稱，並以 gauge 為前綴。

事件引數目標說明
beforeDestroy(gauge)gauge事件將在 Gauge 執行個體被銷毀前觸發。事件處理常式會收到 Gauge 執行個體作為引數
gaugeBeforeDestroy(gauge)app

Gauge 自動初始化

如果您不需要使用 Gauge API，而且您的 Gauge 在頁面內部，並在頁面初始化時顯示在 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>

在這種情況下，如果您需要存取自動建立的 Gauge 執行個體，可以使用 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>
改善此文件
在此頁面上