パイチャートのReactコンポーネント

Framework7には、シンプルなPie Chartコンポーネントが付属しています。完全にレスポンシブなSVGチャートを作ることができます。

パイチャートコンポーネント

以下のコンポーネントが含まれています。

PieChart (パイチャート)

パイチャートのプロパティ

Prop	Type	Default	Description
id	string		チャート要素のID属性
size	number	320	生成されるSVGイメージのサイズ(px)
tooltip	boolean	false	ホバー時のツールチップの有効化
datasets	array	[]	チャートのデータセット配列 `datasets` の各オブジェクトは、以下のプロパティを持ちます。 `/** Dataset value / value: number; /* Dataset HEX color / color?: string; /* Dataset label */ label?: string;`
formatTooltip	function(data)		tooltipのHTMLコンテンツを返さなければならないカスタムレンダリング関数。受信した `data` オブジェクトには、以下のプロパティがあります。 `index: number; value: number; label: string; color: string; percentage: number;`

パイチャートのイベント

Event	Arguments	Description
select	(index, item)	Event will be triggered (when tooltip enabled) on chart hover

Examples

import React from 'react';
import { Page, Navbar, BlockTitle, Block, PieChart } from 'framework7-react';

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

      <BlockTitle>With Tooltip</BlockTitle>
      <Block strong>
        <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 strong>
        <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>
      
    
  );
};