贊助商成為贊助商

圓餅圖 Svelte 組件

Framework7 附帶簡單的圓餅圖組件。它產生美觀且完全響應的 SVG 圖表。

圓餅圖組件

包含以下組件

圓餅圖屬性

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

圓餅圖事件

事件引數說明
select(index, item)滑鼠移到圖表時會觸發事件（當工具提示已啟用）

範例

pie-chart.svelte
<script>
  import { Page, Navbar, BlockTitle, Block, PieChart } from 'framework7-svelte';
</script>

<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>
    <!-- prettier-ignore -->
    <PieChart
      datasets={[
        {
          value: 100,
          color: '#f00',
        },
        {
          value: 200,
          color: '#0f0',
        },
        {
          value: 300,
          color: '#00f',
        },
      ]}
    />
  </Block>

  <BlockTitle>With Tooltip</BlockTitle>
  <Block strongIos outlineIos>
    <!-- prettier-ignore -->
    <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>
    <!-- prettier-ignore -->
    <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>
改善此文件
在此頁面