Area Chart Svelte Component（エリアチャート・Svelte・コンポーネント

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

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

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

エリアチャート `AreaChart

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

Prop	Type	Default	Description
width	number	640	生成される SVG 画像の幅 (px)
height	number	320	生成されるSVG画像の高さ(px)
datasets	array	[]	チャートのデータセット配列 `datasets` の各オブジェクトは、以下のプロパティを持ちます。 `/** Dataset value / values: number[]; /* Dataset HEX color / color?: string; /* Dataset label */ label?: string;`
lineChart	boolean	false	ラインチャートを有効にする（エリアチャートではなく）。
axis	boolean	false	チャートの水平（X）軸を有効にする
axisLabels	array	[]	チャートの水平(X)軸のラベルデータセットの値と同じ量のアイテムを持つ必要があります。
tooltip	boolean	false	ホバー時のツールチップを有効にする
legend	boolean	false	チャートの凡例を表示する
toggleDatasets	boolean	false	有効にすると、凡例の項目をクリックしたときにデータセットが切り替わる。
maxAxisLabels	number	8	軸に表示する軸ラベルの最大数(tick)
formatAxisLabel	function(label)		軸ラベルのテキストをフォーマットするカスタムレンダリング関数
formatLegendLabel	function(label)		凡例ラベルのテキストをフォーマットするカスタムレンダリング関数
formatTooltip	function(data)		tooltipのHTMLコンテンツを返さなければならないカスタムレンダリング関数です。受信した `data` オブジェクトには、以下のプロパティがあります。 `index: number; total: number; datasets: { color?: string; label: any; value: number; }`
formatTooltipAxisLabel	function(label)		Tooltipの軸ラベルのテキストをフォーマットするカスタムレンダリング関数
formatTooltipTotal	function(total)		Tooltipの合計値のテキストをフォーマットするカスタムレンダリング関数
formatTooltipDataset	function(label, value, color)		データセットのテキストをツールチップに表示するカスタムレンダリング関数

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

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

Examples

<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" />

  <BlockTitle>Simple Area Chart</BlockTitle>
  <Block strong>
    <!-- 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 strong>
    <!-- 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 strong>
    <!-- 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 strong>
    <!-- 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 strong>
    <!-- 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>