v6.3.3
Support Framework7
logo_github stars forks
logo_applelogo_androiddevice_desktop
スポンサー
Support Framework7

エリアチャートのReactコンポーネント

    Framework7にはシンプルなArea Chartコンポーネントが付属しています。見た目にも美しい、完全にレスポンシブなSVGチャートを生成します。

    エリアチャートのコンポーネント

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

    • AreaChart (エリアチャート)

    エリアチャートのプロパティ

    PropTypeDefaultDescription
    idstringチャート要素のID属性
    widthnumber640生成されるSVG画像の幅(px)
    heightnumber320生成されるSVG画像の高さ(px)
    datasetsarray[]チャートのデータセット 配列 datasets の各オブジェクトは、以下のプロパティを持ちます。
    /** Dataset value */
values: number[];
/** Dataset HEX color */
color?: string;
/** Dataset label */
label?: string;
    lineChartbooleanfalseラインチャートを有効にする（エリアチャートの代わりに
    axisbooleanfalseチャートの水平（X）軸を有効にする
    axisLabelsarray[]チャートの水平(X)軸のラベル データセットの値と同じ量のアイテムを持つ必要があります。
    tooltipbooleanfalseホバー時のツールチップを有効にする
    legendbooleanfalseチャートの凡例を表示する
    toggleDatasetsbooleanfalse有効にすると、凡例の項目をクリックしたときにデータセットが切り替わる。
    maxAxisLabelsnumber8軸に表示する軸ラベルの最大数(tick)
    formatAxisLabelfunction(label)軸ラベルのテキストをフォーマットするカスタムレンダリング関数
    formatLegendLabelfunction(label)凡例ラベルのテキストをフォーマットするカスタムレンダリング関数
    formatTooltipfunction(data)tooltipのHTMLコンテンツを返さなければならないカスタムレンダリング関数です。受信した data オブジェクトには、以下のプロパティがあります。
    index: number;
total: number;
datasets: {
  color?: string;
  label: any;
  value: number;
}
    formatTooltipAxisLabelfunction(label)Tooltipの軸ラベルのテキストをフォーマットするカスタムレンダリング関数
    formatTooltipTotalfunction(total)Tooltipの合計値のテキストをフォーマットするカスタムレンダリング関数
    formatTooltipDatasetfunction(label, value, color)データセットのテキストをツールチップに表示するカスタムレンダリング関数

    エリアチャートのイベント

    EventArgumentsDescription
    select(index)Event will be triggered (when tooltip enabled) on chart hover

    Examples

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

export default () => {
  // helpers data for axis
  const dates = [];
  const today = new Date();
  const year = today.getFullYear();
  const month = today.getMonth();
  for (let i = 0; i < 4; i += 1) {
    dates.push(new Date(year, month - (3 - i)));
  }
  const axisDateFormat = Intl.DateTimeFormat(undefined, { month: 'short', year: 'numeric' });
  const tooltipDateFormat = Intl.DateTimeFormat(undefined, { month: 'long', year: 'numeric' });

  return (
    
      
    <Page>
      <Navbar title="Area Chart" />
      <BlockTitle>Simple Area Chart</BlockTitle>
      <Block strong>
        <AreaChart
          datasets={[
            {
              color: '#f00',
              values: [0, 100, 250, 300, 175, 400],
            },
            {
              color: '#00f',
              values: [100, 75, 133, 237, 40, 200],
            },
            {
              color: '#ff0',
              values: [100, 300, 127, 40, 250, 80],
            },
          ]}
        />
      </Block>
      <BlockTitle>Area Chart With Tooltip</BlockTitle>
      <Block strong>
        <AreaChart
          tooltip
          datasets={[
            {
              label: 'Red data',
              color: '#f00',
              values: [100, 75, 133, 237, 40, 200],
            },
            {
              label: 'Blue data',
              color: '#00f',
              values: [100, 300, 127, 40, 250, 80],
            },
            {
              label: 'Yellow data',
              color: '#ff0',
              values: [0, 100, 250, 300, 175, 400],
            },
          ]}
        />
      </Block>
      <BlockTitle>Area Chart With Axis</BlockTitle>
      <Block strong>
        <AreaChart
          tooltip
          axis
          axisLabels={dates}
          formatAxisLabel={(date) => axisDateFormat.format(date)}
          formatTooltipAxisLabel={(date) => tooltipDateFormat.format(date)}
          datasets={[
            {
              label: 'Green data',
              color: '#0f0',
              values: [100, 75, 133, 237],
            },
            {
              label: 'Red data',
              color: '#f00',
              values: [100, 300, 127, 47],
            },
            {
              label: 'Yellow data',
              color: '#ff0',
              values: [0, 100, 250, 307],
            },
          ]}
        />
      </Block>
      <BlockTitle>Area Chart With Legend</BlockTitle>
      <Block strong>
        <AreaChart
          tooltip
          axis
          axisLabels={dates}
          legend
          toggleDatasets
          formatAxisLabel={(date) => axisDateFormat.format(date)}
          formatTooltipAxisLabel={(date) => tooltipDateFormat.format(date)}
          datasets={[
            {
              label: 'Red data',
              color: '#f00',
              values: [100, 300, 127, 47],
            },
            {
              label: 'Blue data',
              color: '#00f',
              values: [100, 75, 133, 237],
            },
            {
              label: 'Yellow data',
              color: '#ff0',
              values: [0, 100, 250, 307],
            },
          ]}
        />
      </Block>
      <BlockTitle>Lines Chart</BlockTitle>
      <Block strong>
        <AreaChart
          tooltip
          axis
          axisLabels={dates}
          legend
          toggleDatasets
          lineChart
          formatAxisLabel={(date) => axisDateFormat.format(date)}
          formatTooltipAxisLabel={(date) => tooltipDateFormat.format(date)}
          datasets={[
            {
              label: 'Red data',
              color: '#f00',
              values: [0, 300, 127, 47],
            },
            {
              label: 'Blue data',
              color: '#00f',
              values: [0, 75, 133, 237],
            },
            {
              label: 'Green data',
              color: '#0f0',
              values: [0, 100, 250, 307],
            },
          ]}
        />
      </Block>
    </Page>
      
    
  );
};