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

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

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;
line-chart真偽値false（エリアチャートではなく）折れ線グラフを有効にします
axis真偽値falseチャートの水平（X）軸を有効にします
axis-labels配列[]チャートの水平（X）軸ラベル。データセットの値と同じ数のアイテムが必要です
tooltip真偽値falseホバー時にツールチップを有効にします
legend真偽値falseチャートの凡例を有効にします
toggle-datasets真偽値false有効にすると、凡例項目のクリック時にデータセットを切り替えます
max-axis-labels数値8軸に表示される軸ラベル（目盛り）の最大数
format-axis-labelfunction(label)軸ラベルテキストをフォーマットするためのカスタムレンダリング関数
format-legend-labelfunction(label)凡例ラベルテキストをフォーマットするためのカスタムレンダリング関数
format-tooltipfunction(data)ツールチップのHTMLコンテンツを返す必要があるカスタムレンダリング関数。受け取ったdataオブジェクトには、次のプロパティがあります
index: number;
total: number;
datasets: {
  color?: string;
  label: any;
  value: number;
}
format-tooltip-axisLabelfunction(label)ツールチップの軸ラベルテキストをフォーマットするためのカスタムレンダリング関数
format-tooltipT-totalfunction(total)ツールチップの合計値テキストをフォーマットするためのカスタムレンダリング関数
format-tooltip-datasetfunction(label, value, color)ツールチップのデータセットテキストをフォーマットするためのカスタムレンダリング関数

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

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

例

area-chart.vue
<template>
  <f7-page>
    <f7-navbar title="Area Chart" />
    <f7-block strong-ios outline-ios>
      <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>
    </f7-block>
    <f7-block-title>Simple Area Chart</f7-block-title>
    <f7-block strong-ios outline-ios>
      <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-ios outline-ios>
      <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-ios outline-ios>
      <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-ios outline-ios>
      <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-ios outline-ios>
      <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>
import { f7Page, f7Navbar, f7BlockTitle, f7Block, f7AreaChart } from 'framework7-vue';

export default {
  components: {
    f7Page,
    f7Navbar,
    f7BlockTitle,
    f7Block,
    f7AreaChart,
  },
  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>
このドキュメントを改善する
このページについて