贊助商成為贊助商

圓餅圖

Framework7 附帶簡單的圓餅圖元件。它會產生美觀且完全回應式的 SVG 圖表。

圓餅圖版面

由於圓餅圖 SVG 是由 JavaScript 產生的，因此其 HTML 版面盡可能簡單

<!-- Pie chart element -->
<div class="pie-chart"></div>

圓餅圖應用程式方法

現在我們需要建立/初始化圓餅圖。讓我們看看相關的應用程式方法來使用它

app.pieChart.create(參數)- 建立圓餅圖實例

  • 參數 - 物件。包含圓餅圖參數的物件

方法傳回已建立的圓餅圖實例

app.pieChart.destroy(el)- 銷毀圓餅圖實例

  • el - HTMLElement 或 字串（含 CSS 選擇器）或 物件。要銷毀的圓餅圖元素或圓餅圖實例。

app.pieChart.get(el)- 透過 HTML 元素取得圓餅圖實例

  • el - HTMLElement 或 字串（含 CSS 選擇器）。圓餅圖元素。

方法傳回圓餅圖實例

app.pieChart.update(參數)- 根據傳遞的參數更新/重新渲染圓餅圖 SVG

  • 參數 - 物件。包含圓餅圖參數的物件

方法傳回圓餅圖實例

圓餅圖參數

現在讓我們看看建立圓餅圖所需的可用參數清單

參數類型預設描述
elHTMLElement
字串		圓餅圖元素。HTMLElement 或包含圓餅圖元素 CSS 選擇器的字串。產生的 SVG 將插入此元素
資料集陣列[]圖表資料集。資料集陣列中的每個物件都有下列屬性
/** Dataset value */
value: number;
/** Dataset HEX color */
color?: string;
/** Dataset label */
label?: string;
大小數字320產生的 SVG 影像大小（以像素為單位）
工具提示布林值假在滑鼠移入時啟用工具提示
資料集陣列[]圖表資料集。資料集陣列中的每個物件都有下列屬性
/** Dataset value */
value: number;
/** Dataset HEX color */
color?: string;
/** Dataset label */
label?: string;
formatTooltip函數(資料)自訂的渲染函數，必須傳回工具提示的 HTML 內容。收到的 資料 物件具有下列屬性
index: number;
value: number;
label: string;
color: string;
percentage: number;
on物件

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

var pieChart = app.pieChart.create({
  el: '.pie-chart',
  on: {
    beforeDestroy: function () {
      console.log('Pie Chart will be destroyed')
    }
  }
})

圓餅圖方法和屬性

因此，若要建立圓餅圖，我們必須呼叫

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

之後，我們會取得其初始化的執行個體（如上例中的 pieChart 變數），並具有有用的方法和屬性

屬性
pieChart.app連結至全域應用程式執行個體
pieChart.el圓餅圖 HTML 元素
pieChart.$el具有圓餅圖 HTML 元素的 Dom7 執行個體
pieChart.svgEl圓餅圖產生的 SVG HTML 元素
pieChart.$svgEl具有產生的 SVG HTML 元素的 Dom7 執行個體
pieChart.params圓餅圖參數
方法
pieChart.update(參數)根據傳遞的參數更新/重新渲染圓餅圖 SVG 元素。它接受一個物件，其中包含圓餅圖初始化所需的相同參數。您只能傳遞需要更新的參數，例如
var pieChart = app.pieChart.create({
  datasets: datasetsA,
  // ...
});

// and when we need to update rendered SVG based on new datasets:
pieChart.update({
  datasets: datasetsB,
});
pieChart.destroy()銷毀圓餅圖執行個體
pieChart.on(事件, 處理常式)新增事件處理常式
pieChart.once(事件, 處理常式)新增事件處理常式，在觸發後將會移除
pieChart.off(事件, 處理常式)移除事件處理常式
pieChart.off(事件)移除指定事件的所有處理常式
pieChart.emit(事件, ...引數)在執行個體上觸發事件

圓餅圖事件

圓餅圖會在圓餅圖元素上觸發下列 DOM 事件，以及在應用程式和圓餅圖執行個體上觸發事件

DOM 事件

事件目標描述
piechart:select圓餅圖元素<div class="pie-chart">當滑鼠移入圖表時，將觸發事件（當啟用工具提示時）
piechart:beforedestroy圓餅圖元素<div class="pie-chart">在圓餅圖執行個體即將被銷毀之前，將觸發事件

應用程式和圓餅圖執行個體事件

圓餅圖執行個體會在自身執行個體和應用程式執行個體上發出事件。應用程式執行個體事件具有相同的名稱，但字首為 pieChart。

事件引數目標描述
選取(pieChart, 索引, 資料集)pieChart當滑鼠移入圖表時，將觸發事件（當啟用工具提示時）
pieChartSelect(pieChart, 索引, 資料集)應用程式
beforeDestroy(圓餅圖)pieChart事件會在圓餅圖執行個體被銷毀之前觸發。事件處理常式會將圓餅圖執行個體當作參數接收
pieChartBeforeDestroy(圓餅圖)應用程式

範例

pie-chart.html
<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner">
        <div class="title">Pie Chart</div>
      </div>
    </div>
    <div class="page-content">
      <div class="block block-strong-ios block-outline-ios">
        <p>Framework7 comes with simple to use and fully responsive Pie Chart component.</p>
        <p>Pie Chart generates SVG layout which makes it also compatible with SSR (server side rendering).</p>
      </div>
      <div class="block-title">Simple Pie Chart</div>
      <div class="block block-strong-ios block-outline-ios">
        <div class="pie-chart pie-chart-1"></div>
      </div>

      <div class="block-title">With Tooltip</div>
      <div class="block block-strong-ios block-outline-ios">
        <div class="pie-chart pie-chart-2"></div>
      </div>

      <div class="block-title">Custom Format Tooltip</div>
      <div class="block block-strong-ios block-outline-ios">
        <div class="pie-chart pie-chart-3"></div>
      </div>
    </div>
  </div>
</template>
<script>
  export default (props, { $f7, $onMounted, $onBeforeUnmount }) => {
    let pieSimple;
    let pieTooltip;
    let pieCustomTooltip;

    $onMounted(() => {
      pieSimple = $f7.pieChart.create({
        el: '.pie-chart-1',
        datasets: [
          {
            value: 100,
            color: '#f00',
          },
          {
            value: 200,
            color: '#0f0',
          },
          {
            value: 300,
            color: '#00f',
          },
        ]
      });
      pieTooltip = $f7.pieChart.create({
        el: '.pie-chart-2',
        tooltip: true,
        datasets: [
          {
            label: 'JavaScript',
            value: 150,
            color: '#ff0',
          },
          {
            label: 'Vue.js',
            value: 150,
            color: '#0f0',
          },
          {
            label: 'TypeScript',
            value: 400,
            color: '#00f',
          },
        ]
      })
      pieCustomTooltip = $f7.pieChart.create({
        el: '.pie-chart-3',
        tooltip: true,
        datasets: [
          {
            label: 'JavaScript',
            value: 1000,
            color: '#ff0',
          },
          {
            label: 'Vue.js',
            value: 100,
            color: '#0f0',
          },
          {
            label: 'TypeScript',
            value: 200,
            color: '#00f',
          },
        ],
        formatTooltip(data) {
          const { value, label, color } = data;
          return `You have <span style="color: ${color}">${value} points</span> for ${label}`;
        }
      })
    })

    $onBeforeUnmount(() => {
      pieSimple.destroy();
      pieTooltip.destroy();
      pieCustomTooltip.destroy();
    })

    return $render;
  }
</script>
改善此文件
在此頁面