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

円グラフ Vue コンポーネント

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

円グラフコンポーネント

以下のコンポーネントが含まれています

円グラフプロパティ

プロパティ型デフォルト説明
size数値320生成される SVG 画像サイズ（px単位）
tooltipブール値falseホバー時のツールチップを有効にします
datasets配列[]チャートデータセット。datasets配列内の各オブジェクトは、以下のプロパティを持ちます。
/** Dataset value */
value: number;
/** Dataset HEX color */
color?: string;
/** Dataset label */
label?: string;
format-tooltipfunction(data)ツールチップのHTMLコンテンツを返す必要があるカスタムレンダリング関数。受け取ったdataオブジェクトは、以下のプロパティを持ちます。
index: number;
value: number;
label: string;
color: string;
percentage: number;

円グラフイベント

イベント引数説明
select(index, item)チャートにホバーしたときに（ツールチップが有効な場合）トリガーされるイベント

例

pie-chart.vue
<template>
  <f7-page>
    <f7-navbar title="Pie Chart" />
    <f7-block strong-ios 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>
    </f7-block>
    <f7-block-title>Simple Pie Chart</f7-block-title>
    <f7-block strong-ios outline-ios>
      <f7-pie-chart
        :datasets="[
          {
            value: 100,
            color: '#f00',
          },
          {
            value: 200,
            color: '#0f0',
          },
          {
            value: 300,
            color: '#00f',
          },
        ]"
      />
    </f7-block>

    <f7-block-title>With Tooltip</f7-block-title>
    <f7-block strong-ios outline-ios>
      <f7-pie-chart
        tooltip
        :datasets="[
          {
            label: 'JavaScript',
            value: 150,
            color: '#ff0',
          },
          {
            label: 'Vue.js',
            value: 150,
            color: '#0f0',
          },
          {
            label: 'TypeScript',
            value: 400,
            color: '#00f',
          },
        ]"
      />
    </f7-block>

    <f7-block-title>Custom Format Tooltip</f7-block-title>
    <f7-block strong-ios outline-ios>
      <f7-pie-chart
        tooltip
        :datasets="[
          {
            label: 'JavaScript',
            value: 1000,
            color: '#ff0',
          },
          {
            label: 'Vue.js',
            value: 100,
            color: '#0f0',
          },
          {
            label: 'TypeScript',
            value: 200,
            color: '#00f',
          },
        ]"
        :format-tooltip="
          ({ color, value, label }) =>
            `You have <span style='color: ${color}'>${value} points</span> for ${label}`
        "
      />
    </f7-block>
  </f7-page>
</template>
<script>
import { f7Page, f7Navbar, f7BlockTitle, f7Block, f7PieChart } from 'framework7-vue';

export default {
  components: {
    f7Page,
    f7Navbar,
    f7BlockTitle,
    f7Block,
    f7PieChart,
  },
};
</script>
このドキュメントを改善する
このページについて