円グラフ

Framework7には、シンプルな円グラフコンポーネントが付属しています。完全にレスポンシブなSVGチャートを生成します。

パイチャートのレイアウト

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

<!-- 円グラフ要素 -->
<div class="pie-chart"></div>

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

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

app.pieChart.create(parameters)- 円グラフのインスタンス作成

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

メソッドは作成されたPie Chartのインスタンスを返します

app.pieChart.destroy(el)- パイチャートのインスタンスの破棄

el - HTMLElementまたはstring（CSSセレクタを使用）またはobject。壊すべきパイチャート要素またはパイチャートインスタンスです。

app.pieChart.get(el)- HTML要素でパイチャートのインスタンスを取得

el - HTMLElement または string (CSS Selectorを使用)。パイチャートの要素です。

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

app.pieChart.update(parameters)- 渡されたパラメータに従って、パイチャートのSVGを更新／レンダリングします。

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

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

パイチャートのパラメータ

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

Parameter	Type	Default	Description
el	HTMLElement string		パイチャートの要素。HTML要素、またはパイチャート要素のCSSセレクタを持つ文字列。生成されたSVGはこの要素に挿入されます。
datasets	array	[]	チャートのデータセット。配列 `datasets` の各オブジェクトは、以下のプロパティを持ちます。 `/** Dataset value / value: number; /* Dataset HEX color / color?: string; /* Dataset label */ label?: string;`
size	number	320	生成されるSVG画像のサイズ (px単位)
tooltip	boolean	false	ホバー時にツールチップを有効にする
datasets	array	[]	チャートのデータセットです。datasets` 配列内の各オブジェクトには、以下のプロパティがあります。 `/** Dataset value / value: number; /* Dataset HEX color / color?: string; /* Dataset label */ label?: string;`
formatTooltip	function(data)		tooltip の HTML コンテンツを返す必要がある、カスタムのレンダリング関数です。受信した `data` オブジェクトには、次のようなプロパティがあります。 `index: number; value: number; label: string; color: string; percentage: number;`
on	object		イベントハンドラーを持つオブジェクト。例えば、以下のようになります。 `var pieChart = app.pieChart.create({ el: '.pie-chart', on: { beforeDestroy: function () { console.log('Pie Chart will be destroyed') } } })`

パイチャートのメソッドとプロパティ

パイチャートを作成するためには、まずメソッドを呼び出す必要があります。

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

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

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

パイチャートのイベント

パイチャートでは、以下のDOMイベントがパイチャート要素で、イベントがアプリとパイチャートのインスタンスで発生します。

DOMイベント

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

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

パイチャートのインスタンスは、selfのインスタンスとappのインスタンスの両方でイベントを発行します。アプリのインスタンスのイベントは、同じ名前でプレフィックスが pieChart となっています。

Event	Arguments	Target	Description
select	(pieChart, index, dataset)	pieChart	イベントは、チャートのホバーでトリガされます（tooltipが有効な場合）。
pieChartSelect	(pieChart, index, dataset)	app	イベントは、チャートのホバーでトリガされます（tooltipが有効な場合）。
beforeDestroy	(pieChart)	pieChart	イベントは、パイチャートのインスタンスが破棄される直前に発生します。イベントハンドラは、パイチャートのインスタンスを引数として受け取ります。
pieChartBeforeDestroy	(pieChart)	app

Examples

<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner">
        <div class="title">Pie Chart</div>
      </div>
    </div>
    <div class="page-content">
      <div class="block-title">Simple Pie Chart</div>
      <div class="block block-strong">
        <div class="pie-chart pie-chart-1"></div>
      </div>

      <div class="block-title">With Tooltip</div>
      <div class="block block-strong">
        <div class="pie-chart pie-chart-2"></div>
      </div>

      <div class="block-title">Custom Format Tooltip</div>
      <div class="block block-strong">
        <div class="pie-chart pie-chart-3"></div>
      </div>
    </div>
  </div>
</template>
<script>
  export default (props, { $f7, $onMounted, $onBeforeUnmount }) => {
    let pieSimple;
    let pieTooltip;
    let pieCustomTooltip;

    $onMounted(() => {
      pieSimple = $f7.pieChart.create({
        el: '.pie-chart-1',
        datasets: [
          {
            value: 100,
            color: '#f00',
          },
          {
            value: 200,
            color: '#0f0',
          },
          {
            value: 300,
            color: '#00f',
          },
        ]
      });
      pieTooltip = $f7.pieChart.create({
        el: '.pie-chart-2',
        tooltip: true,
        datasets: [
          {
            label: 'JavaScript',
            value: 150,
            color: '#ff0',
          },
          {
            label: 'Vue.js',
            value: 150,
            color: '#0f0',
          },
          {
            label: 'TypeScript',
            value: 400,
            color: '#00f',
          },
        ]
      })
      pieCustomTooltip = $f7.pieChart.create({
        el: '.pie-chart-3',
        tooltip: true,
        datasets: [
          {
            label: 'JavaScript',
            value: 1000,
            color: '#ff0',
          },
          {
            label: 'Vue.js',
            value: 100,
            color: '#0f0',
          },
          {
            label: 'TypeScript',
            value: 200,
            color: '#00f',
          },
        ],
        formatTooltip(data) {
          const { value, label, color } = data;
          return `You have <span style="color: ${color}">${value} points</span> for ${label}`;
        }
      })
    })

    $onBeforeUnmount(() => {
      pieSimple.destroy();
      pieTooltip.destroy();
      pieCustomTooltip.destroy();
    })

    return $render;
  }
</script>