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

エリアチャート

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

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

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

<!-- Area Chart element -->
<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 セレクター付き)。エリアチャート要素。

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

app.areaChart.update(parameters) - 渡されたパラメータに従ってエリアチャート SVG を更新/再レンダリングします。

  • parameters - object。エリアチャートのパラメータを含むオブジェクト。

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

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

ここで、エリアチャートを作成するために必要な利用可能なパラメータのリストを見てみましょう。

パラメータ型デフォルト説明
elHTMLElement
string		エリアチャート要素。エリアチャート要素の HTMLElement または CSS セレクターを持つ文字列。生成された SVG はこの要素に挿入されます。
widthnumber640生成された SVG 画像の幅 (px 単位)
heightnumber320number
生成された SVG 画像の高さ (px 単位)datasets[]array
/** Dataset value */
values: number[];
/** Dataset HEX color */
color?: string;
/** Dataset label */
label?: string;
チャートデータセット。 datasets 配列の各オブジェクトには、次のプロパティがあります。lineChartbooleanfalse
ラインチャート (エリアチャートの代わりに) を有効にします。lineChartbooleanaxis
booleandatasets[]チャートの水平 (X) 軸を有効にします。
axisLabelslineChartbooleanarray
チャートの水平 (X) 軸ラベル。データセットの値と同じ数の項目を持つ必要があります。lineChartbooleantooltip
booleanlineChartbooleanホバー時にツールチップを有効にします。
legendnumber8boolean
チャートの凡例を有効にします。toggleDatasetsboolean
有効にすると、凡例の項目をクリックするとデータセットが切り替わります。toggleDatasetsmaxAxisLabels
number軸に表示される軸ラベル (目盛) の最大数。formatAxisLabel
index: number;
total: number;
datasets: {
  color?: string;
  label: any;
  value: number;
}
function(label)toggleDatasets軸ラベルのテキストをフォーマットするためのカスタムレンダリング関数。
formatLegendLabelfunction(label)凡例ラベルのテキストをフォーマットするためのカスタムレンダリング関数。
formatTooltipfunction(data)ツールチップの HTML コンテンツを返す必要があるカスタムレンダリング関数。受信した data オブジェクトには、次のプロパティがあります。
formatTooltipAxisLabelfunction(label)

ツールチップ内の軸ラベルのテキストをフォーマットするカスタムレンダリング関数。

var areaChart = app.areaChart.create({
  el: '.area-chart',
  on: {
    beforeDestroy: function () {
      console.log('Area Chart will be destroyed')
    }
  }
})

formatTooltipTotal

function(total)

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

ツールチップ内の合計値のテキストをフォーマットするカスタムレンダリング関数。

formatTooltipDataset
function(label, value, color)ツールチップ内のデータセットのテキストをフォーマットするカスタムレンダリング関数。
onobject
イベントハンドラーを持つオブジェクト。例えばエリアチャートのメソッドとプロパティ
したがって、エリアチャートを作成するには、以下を呼び出す必要があります。その後、便利なメソッドとプロパティを備えた、初期化されたインスタンス (上記の例の areaChart 変数など) があります。
プロパティareaChart.app
グローバルアプリインスタンスへのリンク。areaChart.el
エリアチャートの HTML 要素。
areaChart.$elエリアチャートの HTML 要素を持つ Dom7 インスタンス。
var areaChart = app.areaChart.create({
  datasets: datasetsA,
  // ...
});

// and when we need to update rendered SVG based on new datasets:
areaChart.update({
  datasets: datasetsB,
});
areaChart.svgElエリアチャートで生成された SVG HTML 要素。
areaChart.$svgEl生成された SVG HTML 要素を持つ Dom7 インスタンス。
areaChart.paramsエリアチャートのパラメータ。
メソッドareaChart.update(parameters)
渡されたパラメータに従って、エリアチャートの SVG 要素を更新/再レンダリングします。エリアチャートの初期化に必要な同じパラメータを持つオブジェクトを受け入れます。更新する必要があるパラメータのみを渡すことができます。例えばareaChart.destroy()
エリアチャートインスタンスを破棄します。areaChart.on(event, handler)

イベントハンドラーを追加します。

areaChart.once(event, handler)

発生後に削除されるイベントハンドラーを追加します。

areaChart.off(event, handler)イベントハンドラーを削除します。説明
areaChart.off(event)指定されたイベントのすべてのハンドラーを削除します。areaChart.emit(event, ...args)
インスタンスでイベントを発生させます。指定されたイベントのすべてのハンドラーを削除します。エリアチャートのイベント

エリアチャートは、エリアチャート要素で次の DOM イベントと、アプリおよびエリアチャートインスタンスのイベントを発生させます。

DOM イベント

areaChart.off(event, handler)イベントイベントハンドラーを削除します。説明
ターゲットareachart:selectエリアチャート要素<div class="area-chart">areaChart.emit(event, ...args)
チャートのホバー時に (ツールチップが有効な場合) イベントがトリガーされます。areachart:selectareachart:beforedestroy
エリアチャートインスタンスが破棄される直前にイベントがトリガーされます。アプリおよびエリアチャートインスタンスイベントエリアチャート要素<div class="area-chart">エリアチャートインスタンスは、自身インスタンスとアプリインスタンスの両方でイベントを発生させます。アプリインスタンスイベントには、areaChart がプレフィックスとして付いた同じ名前があります。
引数アプリおよびエリアチャートインスタンスイベントareachart:beforedestroy

CSS変数

select

: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-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 .dark,
:root.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);
}
.ios {
  --f7-area-chart-tooltip-total-label-text-color: rgba(255, 255, 255, 0.75);
}
.md {
  --f7-area-chart-tooltip-total-label-text-color: inherit;
}

(areaChart, index)

areaChart
<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 block-strong-ios block-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>
      </div>
      <div class="block-title">Simple Area Chart</div>
      <div class="block block-strong-ios block-outline-ios">
        <div class="area-chart area-chart-simple"></div>
      </div>
      <div class="block-title">Area Chart With Tooltip</div>
      <div class="block block-strong-ios block-outline-ios">
        <div class="area-chart area-chart-with-tooltip"></div>
      </div>
      <div class="block-title">Area Chart With Axis</div>
      <div class="block block-strong-ios block-outline-ios">
        <div class="area-chart area-chart-with-axis"></div>
      </div>
      <div class="block-title">Area Chart With Legend</div>
      <div class="block block-strong-ios block-outline-ios">
        <div class="area-chart area-chart-with-legend"></div>
      </div>
      <div class="block-title">Lines Chart</div>
      <div class="block block-strong-ios block-outline-ios">
        <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>
エリアチャートインスタンスが破棄される直前にイベントがトリガーされます。引数として、イベントハンドラーはエリアチャートインスタンスを受け取ります。
areaChartBeforeDestroy