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

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

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

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

f7-area-chart です。

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

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;`
line-chart	boolean	false	ラインチャートを有効にする（エリアチャートではなく）。
axis	boolean	false	チャートの水平（X）軸を有効にする
axis-labels	array	[]	チャートの水平(X)軸のラベルデータセットの値と同じ量のアイテムを持つ必要があります。
tooltip	boolean	false	ホバー時のツールチップを有効にする
legend	boolean	false	チャートの凡例を表示する
toggle-datasets	boolean	false	有効にすると、凡例の項目をクリックしたときにデータセットが切り替わる。
max-axis-labels	number	8	軸に表示する軸ラベルの最大数(tick)
format-axis-label	function(label)		軸ラベルのテキストをフォーマットするカスタムレンダリング関数
format-legend-label	function(label)		凡例ラベルのテキストをフォーマットするカスタムレンダリング関数
format-tooltip	function(data)		tooltipのHTMLコンテンツを返さなければならないカスタムレンダリング関数です。受信した `data` オブジェクトには、以下のプロパティがあります。 `index: number; total: number; datasets: { color?: string; label: any; value: number; }`
format-tooltip-axisLabel	function(label)		Tooltipの軸ラベルのテキストをフォーマットするカスタムレンダリング関数
format-tooltipT-total	function(total)		Tooltipの合計値のテキストをフォーマットするカスタムレンダリング関数
format-tooltip-dataset	function(label, value, color)		データセットのテキストをツールチップに表示するカスタムレンダリング関数

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

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

Examples

<template>
<f7-page>
  <f7-navbar title="Area Chart" />

  <f7-block-title>Simple Area Chart</f7-block-title>
  <f7-block strong>
    <f7-area-chart
      :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],
        },
      ]"
    />
  </f7-block>
  <f7-block-title>Area Chart With Tooltip</f7-block-title>
  <f7-block strong>
    <f7-area-chart
      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],
        },
      ]"
    />
  </f7-block>
  <f7-block-title>Area Chart With Axis</f7-block-title>
  <f7-block strong>
    <f7-area-chart
      tooltip
      axis
      :axis-labels="dates"
      :format-axis-label="(date) => axisDateFormat.format(date)"
      :format-tooltip-axis-label="(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],
        },
      ]"
    />
  </f7-block>
  <f7-block-title>Area Chart With Legend</f7-block-title>
  <f7-block strong>
    <f7-area-chart
      tooltip
      axis
      :axis-labels="dates"
      legend
      toggle-datasets
      :format-axis-label="(date) => axisDateFormat.format(date)"
      :format-tooltip-axis-label="(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],
        },
      ]"
    />
  </f7-block>
  <f7-block-title>Lines Chart</f7-block-title>
  <f7-block strong>
    <f7-area-chart
      tooltip
      axis
      :axis-labels="dates"
      legend
      toggle-datasets
      line-chart
      :format-axis-label="(date) => axisDateFormat.format(date)"
      :format-tooltip-axis-label="(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],
        },
      ]"
    />
  </f7-block>
</f7-page>
</template>
<script>
export default {
  setup() {
    // 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 {
      dates,
      axisDateFormat,
      tooltipDateFormat,
    };
  },
};
</script>