贊助者成為贊助者

圓餅圖 React 元件

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

圓餅圖元件

包含下列元件

圓餅圖屬性

屬性類型預設值說明
id字串圖表元素 ID 屬性
大小數字320產生的 SVG 影像大小（以像素為單位）
工具提示布林值false在滑鼠游標移入時啟用工具提示
資料集陣列[]圖表資料集。datasets 陣列中的每個物件都有下列屬性
/** Dataset value */
value: number;
/** Dataset HEX color */
color?: string;
/** Dataset label */
label?: string;
格式化工具提示函式 (資料)自訂渲染函式，必須傳回工具提示的 HTML 內容。接收到的 資料 物件有下列屬性
index: number;
value: number;
label: string;
color: string;
percentage: number;

圓餅圖事件

事件引數說明
選取(索引、項目)當滑鼠游標移入圖表時，會觸發事件（在啟用工具提示時）

範例

圓餅圖.jsx
import React from 'react';
import { Page, Navbar, BlockTitle, Block, PieChart } from 'framework7-react';

export default () => {
  return (
    <Page>
      <Navbar title="Pie Chart" />
      <Block strongIos outlineIos>
        <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>
      </Block>
      <BlockTitle>Simple Pie Chart</BlockTitle>
      <Block strongIos outlineIos>
        <PieChart
          datasets={[
            {
              value: 100,
              color: '#f00',
            },
            {
              value: 200,
              color: '#0f0',
            },
            {
              value: 300,
              color: '#00f',
            },
          ]}
        />
      </Block>

      <BlockTitle>With Tooltip</BlockTitle>
      <Block strongIos outlineIos>
        <PieChart
          tooltip
          datasets={[
            {
              label: 'JavaScript',
              value: 150,
              color: '#ff0',
            },
            {
              label: 'Vue.js',
              value: 150,
              color: '#0f0',
            },
            {
              label: 'TypeScript',
              value: 400,
              color: '#00f',
            },
          ]}
        />
      </Block>

      <BlockTitle>Custom Format Tooltip</BlockTitle>
      <Block strongIos outlineIos>
        <PieChart
          tooltip
          datasets={[
            {
              label: 'JavaScript',
              value: 1000,
              color: '#ff0',
            },
            {
              label: 'Vue.js',
              value: 100,
              color: '#0f0',
            },
            {
              label: 'TypeScript',
              value: 200,
              color: '#00f',
            },
          ]}
          formatTooltip={({ color, value, label }) =>
            `You have <span style="color: ${color}">${value} points</span> for ${label}`
          }
        />
      </Block>
    </Page>
  );
};
改善此文件
在此頁面