赞助成为赞助者

饼图 React 组件

Framework7 提供了简单的饼图组件。它生成美观且完全响应式的 SVG 图表。

饼图组件

包括以下组件

饼图属性

属性类型默认值描述
id字符串图表元素 ID 属性
size数字320生成的 SVG 图像大小（以像素为单位）
tooltip布尔值false启用悬停时工具提示
datasets数组[]图表数据集。datasets 数组中的每个对象都具有以下属性
/** Dataset value */
value: number;
/** Dataset HEX color */
color?: string;
/** Dataset label */
label?: string;
格式化Tooltipfunction(data)自定义渲染函数，该函数必须返回tooltip的HTML内容。接收的data对象具有以下属性
index: number;
value: number;
label: string;
color: string;
percentage: number;

饼图事件

事件参数描述
select(index, item)在图表悬停时触发事件（已启用tooltip时）

示例

pie-chart.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>
  );
};
优化此文档
在此页面上