スポンサースポンサーになる

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

Framework7 には、シンプルなエリアチャートコンポーネントが付属しています。これは、見栄えの良い完全にレスポンシブな SVG チャートを生成します。

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

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

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

プロパティ型デフォルト説明
id文字列チャート要素のID属性
width数値640生成される SVG 画像の幅 (px 単位)
height数値320生成される SVG 画像の高さ (px 単位)
datasets配列[]チャートのデータセット。datasets 配列内の各オブジェクトには、次のプロパティがあります。
/** Dataset value */
values: number[];
/** Dataset HEX color */
color?: string;
/** Dataset label */
label?: string;
lineChartブール値false（エリアチャートの代わりに）折れ線グラフを有効にします。
axisブール値falseチャートの水平 (X) 軸を有効にします
axisLabels配列[]チャートの水平 (X) 軸ラベル。データセットの値と同じ数の項目が必要です。
tooltipブール値falseホバー時のツールチップを有効にします。
legendブール値falseチャートの凡例を有効にします。
toggleDatasetsブール値false有効にすると、凡例項目のクリックでデータセットを切り替えます。
maxAxisLabels数値8軸に表示する軸ラベル（目盛り）の最大数
formatAxisLabelfunction(label)軸ラベルテキストをフォーマットするためのカスタムレンダリング関数
formatLegendLabelfunction(label)凡例ラベルテキストをフォーマットするためのカスタムレンダリング関数
formatTooltipfunction(data)ツールチップのHTMLコンテンツを返すカスタムレンダリング関数。受信したdataオブジェクトには次のプロパティがあります。
index: number;
total: number;
datasets: {
  color?: string;
  label: any;
  value: number;
}
formatTooltipAxisLabelfunction(label)ツールチップの軸ラベルテキストをフォーマットするためのカスタムレンダリング関数
formatTooltipTotalfunction(total)ツールチップの合計値テキストをフォーマットするためのカスタムレンダリング関数
formatTooltipDatasetfunction(label, value, color)ツールチップのデータセットテキストをフォーマットするためのカスタムレンダリング関数

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

イベント引数説明
select(index)（ツールチップが有効な場合）チャートのホバー時にイベントがトリガーされます。

例

area-chart.jsx
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" />
      <Block strongIos outlineIos>
        <p>Framework7 comes with simple to use and fully responsive Area Chart component.</p>
        <p>
          Area Chart generates SVG layout which makes it also compatible with SSR (server side
          rendering).
        </p>
      </Block>
      <BlockTitle>Simple Area Chart</BlockTitle>
      <Block strongIos outlineIos>
        <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 strongIos outlineIos>
        <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 strongIos outlineIos>
        <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 strongIos outlineIos>
        <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 strongIos outlineIos>
        <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>
  );
};
このドキュメントを改善する
このページで