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

円グラフ

Framework7 には、シンプルな円グラフコンポーネントが付属しています。 見栄えの良い、完全にレスポンシブな SVG グラフを作成します。

円グラフのレイアウト

円グラフ SVG は JavaScript によって生成されるため、HTML レイアウトは可能な限りシンプルです。

<!-- Pie chart element -->
<div class="pie-chart"></div>

円グラフ アプリメソッド

円グラフを作成/初期化する必要があります。 それを使用するための関連するアプリメソッドを見てみましょう

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

  • parameters - object. 円グラフパラメータを持つオブジェクト

メソッドは、作成された円グラフのインスタンスを返します。

app.pieChart.destroy(el)- 円グラフインスタンスを破棄する

  • el - HTMLElement または string (CSS セレクター付き) または object. 破棄する円グラフ要素または円グラフインスタンス。

app.pieChart.get(el)- HTML 要素から円グラフインスタンスを取得する

  • el - HTMLElement または string (CSS セレクター付き). 円グラフ要素。

メソッドは、円グラフのインスタンスを返します。

app.pieChart.update(parameters)- 渡されたパラメータに従って円グラフ SVG を更新/再レンダリングする

  • parameters - object. 円グラフパラメータを持つオブジェクト

メソッドは、円グラフのインスタンスを返します。

円グラフパラメータ

円グラフを作成するために必要な使用可能なパラメータのリストを見てみましょう

パラメータタイプデフォルト説明
elHTMLElement
string		円グラフ要素。 HTMLElement または円グラフ要素の CSS セレクターを持つ文字列。 生成された SVG はこの要素に挿入されます
datasetsarray[]グラフデータセット。 datasets 配列の各オブジェクトには、次のプロパティがあります
/** Dataset value */
value: number;
/** Dataset HEX color */
color?: string;
/** Dataset label */
label?: string;
sizenumber320生成された SVG 画像サイズ (ピクセル単位)
tooltipbooleanfalseホバー時にツールチップを有効にする
datasetsarray[]グラフデータセット。 datasets 配列の各オブジェクトには、次のプロパティがあります
/** Dataset value */
value: number;
/** Dataset HEX color */
color?: string;
/** Dataset label */
label?: string;
formatTooltipfunction(data)ツールチップの HTML コンテンツを返さなければならないカスタムレンダリング関数。 受信した data オブジェクトには、次のプロパティがあります
index: number;
value: number;
label: string;
color: string;
percentage: number;
onobject

イベントハンドラを持つオブジェクト。 例えば

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 変数など) が得られます

プロパティ
pieChart.appグローバルアプリインスタンスへのリンク
pieChart.el円グラフ HTML 要素
pieChart.$el円グラフ HTML 要素を持つ Dom7 インスタンス
pieChart.svgEl円グラフで生成された SVG HTML 要素
pieChart.$svgEl生成された SVG HTML 要素を持つ Dom7 インスタンス
pieChart.params円グラフパラメータ
メソッド
pieChart.update(parameters)渡されたパラメータに従って円グラフ SVG 要素を更新/再レンダリングします。 円グラフの初期化に必要なものと同じパラメータを持つオブジェクトを受け入れます。 更新する必要があるパラメータのみを渡すことができます。例:
var pieChart = app.pieChart.create({
  datasets: datasetsA,
  // ...
});

// and when we need to update rendered SVG based on new datasets:
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 イベント

イベントターゲット説明
piechart:select円グラフ要素<div class="pie-chart">イベントは、グラフにカーソルを合わせたときにトリガーされます (ツールチップが有効な場合)。
piechart:beforedestroy円グラフ要素<div class="pie-chart">円グラフインスタンスが破棄される直前にイベントがトリガーされます

アプリと円グラフインスタンスイベント

円グラフインスタンスは、セルフインスタンスとアプリインスタンスの両方でイベントを発行します。 アプリインスタンスイベントの名前は、 pieChart というプレフィックスが付いた同じ名前です。

イベント引数ターゲット説明
select(pieChart, index, dataset)pieChartイベントは、グラフにカーソルを合わせたときにトリガーされます (ツールチップが有効な場合)。
pieChartSelect(pieChart, index, dataset)app
beforeDestroy(pieChart)pieChart円グラフインスタンスが破棄される直前にイベントがトリガーされます。 引数として、イベントハンドラは円グラフインスタンスを受け取ります
pieChartBeforeDestroy(pieChart)app

例

pie-chart.html
<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 block-strong-ios block-outline-ios">
        <p>Framework7 comes with simple to use and fully responsive Pie Chart component.</p>
        <p>Pie Chart generates SVG layout which makes it also compatible with SSR (server side rendering).</p>
      </div>
      <div class="block-title">Simple Pie Chart</div>
      <div class="block block-strong-ios block-outline-ios">
        <div class="pie-chart pie-chart-1"></div>
      </div>

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

      <div class="block-title">Custom Format Tooltip</div>
      <div class="block block-strong-ios block-outline-ios">
        <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>
このドキュメントを改善する
このページについて