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

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

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

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

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

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

プロパティ型デフォルト説明
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.svelte
<script>
  import { Page, Navbar, BlockTitle, Block, AreaChart } from 'framework7-svelte';

  // 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' });
</script>

<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>
    <!-- prettier-ignore -->
    <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>
    <!-- prettier-ignore -->
    <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>
    <!-- prettier-ignore -->
    <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>
    <!-- prettier-ignore -->
    <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>
    <!-- prettier-ignore -->
    <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>
このドキュメントを改善する
このページについて