エリアチャート

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

エリアチャートのレイアウト

エリア・チャートのSVGはJavaScriptで生成されるため、HTMLのレイアウトは可能な限りシンプルになっています。

<!-- エリア・チャート要素 -->
<div class="area-chart"></div>

エリアチャートアプリのメソッド

次に、エリア・チャートを作成／初期化する必要があります。関連するアプリ・メソッドを見て、それを操作してみましょう。

app.areaChart.create(parameters)- エリア・チャート・インスタンスの作成

parameters - object. エリア・チャートのパラメータを持つオブジェクト

メソッドは作成されたエリア・チャートのインスタンスを返します

app.areaChart.destroy(el)- エリア・チャートのインスタンスの破棄

el - HTMLElementまたはstring（CSSセレクタ付き）またはobject。破壊するエリア・チャート要素またはエリア・チャート・インスタンスです。

app.areaChart.get(el)- HTML要素によるエリア・チャート・インスタンスの取得

el - HTMLElement または string (CSS Selectorを使用). Area Chartの要素です。

メソッドは、エリアチャートのインスタンスを返します。

app.areaChart.update(parameters)- 渡されたパラメータに応じて、エリアチャートのSVGを更新・描画します。

parameters - object. エリアチャートのパラメータを持つオブジェクト

メソッドは、エリアチャートのインスタンスを返します。

エリア・チャートのパラメータ

エリア・チャートを作成するために必要なパラメータの一覧を見てみましょう。

Parameter	Type	Default	Description
el	HTMLElement string		エリア・チャートの要素。HTML要素またはエリア・チャート要素のCSSセレクタを持つ文字列。生成されたSVGはこの要素に挿入されます。
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)		データセットのテキストをTooltipに表示するカスタムレンダリング関数
on	object		イベントハンドラを持つオブジェクトです。例えば、以下のようになります。 `var areaChart = app.areaChart.create({ el: '.area-chart', on: { beforeDestroy: function () { console.log('Area Chart will be destroyed') } } })`

エリアチャートのメソッドとプロパティ

エリア・チャートを作成するには、まずメソッドを呼び出します。

var areaChart = app.areaChart.create({ /* parameters */ })

その後、初期化されたインスタンス（上の例では areaChart という変数）に、便利なメソッドとプロパティが追加されます。

Properties
areaChart.app	グローバルアプリのインスタンスへのリンク
areaChart.el	エリア・チャートのHTML要素
areaChart.$el	エリア・チャートのHTML要素を持つDom7インスタンス
areaChart.svgEl	エリアチャートの生成されたSVG HTML要素
areaChart.$svgEl	生成されたSVGのHTML要素を持つDom7のインスタンス
areaChart.params	エリアチャートのパラメータ
Methods
areaChart.update(parameters)	エリアチャート SVG 要素を、渡されたパラメータに従って更新／レンダリングします。エリアチャートの初期化に必要なパラメータと同じパラメータを持つオブジェクトを受け取ります。更新する必要のあるパラメータのみを渡すことができます、例えば `var areaChart = app.areaChart.create({ datasets: datasetsA, // ... }); // のように、新しいデータセットに基づいてレンダリングされたSVGを更新する必要がある場合です。 areaChart.update({ datasets: datasetsB, });`
areaChart.destroy()	エリア・チャートのインスタンスを破棄します。
areaChart.on(event, handler)	イベントハンドラの追加
areaChart.once(event, handler)	発生した後に削除されるイベントハンドラを追加します。
areaChart.off(event, handler)	イベントハンドラの削除
areaChart.off(event)	指定したイベントのハンドラをすべて削除する
areaChart.emit(event, ...args)	インスタンスでイベントを発生させる

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

Area Chartでは、Area Chart要素のDOMイベント、アプリとArea Chartインスタンスのイベントが発生します。

DOMイベント

Event	Target	Description
areachart:select	Area Chart Element<div class="area-chart">	イベントは、チャートのホバー時に発生します（tooltipが有効な場合）。
areachart:beforedestroy	Area Chart Element<div class="area-chart">	イベントは、エリア・チャート・インスタンスが破壊される直前に発生します。

アプリとエリア・チャート・インスタンスのイベント

エリア・チャート・インスタンスは、セルフ・インスタンスとアプリ・インスタンスの両方に対してイベントを発します。アプリインスタンスのイベントは、同じ名前でプレフィックスとして areaChart が付いています。

Event	Arguments	Target	Description
select	(areaChart, index)	areaChart	イベントは、チャートのホバー時にトリガーされます（tooltipが有効な場合）。
areaChartSelect	(areaChart, index)	app	イベントは、チャートのホバー時にトリガーされます（tooltipが有効な場合）。
beforeDestroy	(areaChart)	areaChart	イベントは、エリアチャートのインスタンスが破棄される直前に発生します。イベントハンドラは、引数として、エリア・チャートのインスタンス
areaChartBeforeDestroy	(areaChart)	app

CSS Variables

Below is the list of related CSS variables (CSS custom properties).

:root {
  --f7-area-chart-current-line-stroke-width: 2px;
  --f7-area-chart-current-line-stroke: rgba(0, 0, 0, 0.15);
  --f7-area-chart-axis-text-color: inherit;
  --f7-area-chart-axis-height: 1px;
  --f7-area-chart-axis-font-size: 10px;
  --f7-area-chart-axis-font-weight: 500;
  --f7-area-chart-tooltip-font-size: 12px;
  --f7-area-chart-tooltip-total-label-text-color: rgba(255, 255, 255, 0.75);
  --f7-area-chart-tooltip-total-font-size: 16px;
  --f7-area-chart-tooltip-total-font-weight: bold;
  --f7-area-chart-tooltip-color-size: 10px;
  --f7-area-chart-legend-font-size: 14px;
  --f7-area-chart-legend-font-weight: 500;
  --f7-area-chart-legend-text-color: inherit;
  --f7-area-chart-legend-padding: 4px 8px;
  --f7-area-chart-legend-border-radius: 4px;
  --f7-area-chart-legend-color-size: 14px;
  --f7-area-chart-line-stroke-width: 2px;
  --f7-area-chart-axis-bg-color: rgba(0, 0, 0, 0.15);
  --f7-area-chart-legend-disabled-text-color: rgba(0, 0, 0, 0.22);
}
:root .theme-dark,
:root.theme-dark {
  --f7-area-chart-axis-bg-color: rgba(255, 255, 255, 0.15);
  --f7-area-chart-legend-disabled-text-color: rgba(255, 255, 255, 0.22);
}

Examples

<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner">
        <div class="title">Area Chart</div>
      </div>
    </div>
    <div class="page-content">
      <div class="block-title">Simple Area Chart</div>
      <div class="block block-strong">
        <div class="area-chart area-chart-simple"></div>
      </div>
      <div class="block-title">Area Chart With Tooltip</div>
      <div class="block block-strong">
        <div class="area-chart area-chart-with-tooltip"></div>
      </div>
      <div class="block-title">Area Chart With Axis</div>
      <div class="block block-strong">
        <div class="area-chart area-chart-with-axis"></div>
      </div>
      <div class="block-title">Area Chart With Legend</div>
      <div class="block block-strong">
        <div class="area-chart area-chart-with-legend"></div>
      </div>
      <div class="block-title">Lines Chart</div>
      <div class="block block-strong">
        <div class="area-chart area-chart-lines"></div>
      </div>
    </div>
  </div>
</template>
<script>
  export default (props, { $f7, $onMounted, $onBeforeUnmount }) => {
    let areaSimple;
    let areaWithTooltip;
    let areaWithAxis;
    let areaWithLegend;
    let areaLines;

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

    $onMounted(() => {
      areaSimple = $f7.areaChart.create({
        el: '.area-chart-simple',
        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]
          },
        ]
      });
      areaWithTooltip = $f7.areaChart.create({
        el: '.area-chart-with-tooltip',
        tooltip: true,
        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]
          },
        ]
      });

      areaWithAxis = $f7.areaChart.create({
        el: '.area-chart-with-axis',
        tooltip: true,
        axis: true,
        axisLabels: dates,
        formatAxisLabel(date) {
          return axisDateFormat.format(date);
        },
        formatTooltipAxisLabel(date) {
          return 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]
          },
        ]
      });

      areaWithLegend = $f7.areaChart.create({
        el: '.area-chart-with-legend',
        tooltip: true,
        axis: true,
        axisLabels: dates,
        legend: true,
        toggleDatasets: true,
        formatAxisLabel(date) {
          return axisDateFormat.format(date);
        },
        formatTooltipAxisLabel(date) {
          return 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]
          },
        ]
      });

      areaLines = $f7.areaChart.create({
        el: '.area-chart-lines',
        tooltip: true,
        axis: true,
        axisLabels: dates,
        legend: true,
        toggleDatasets: true,
        lineChart: true,
        formatAxisLabel(date) {
          return axisDateFormat.format(date);
        },
        formatTooltipAxisLabel(date) {
          return 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]
          },
        ]
      });
    })

    $onBeforeUnmount(() => {
      areaSimple.destroy();
      areaWithTooltip.destroy();
      areaWithAxis.destroy();
      areaWithLegend.destroy();
      areaLines.destroy();
    })

    return $render;
  }
</script>