饼图 React 组件

Framework7 带有简单的饼图组件。它生成美观的完全响应式 SVG 图表。

饼图组件

包含以下组件：

PieChart

饼图属性

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

饼图事件

事件	参数	描述
select	(index, item)	当启用提示时，事件将在图表悬停时触发

示例

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>
  );
};

改进此文档

在本页上

饼图组件
饼图属性
饼图事件
示例