パイチャートVueコンポーネント

    Framework7には、シンプルなPie Chartコンポーネントが付属しています。完全にレスポンシブなSVGチャートを作ることができます。

    パイチャートのコンポーネント

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

    • f7-パイチャート f7-pie-chart`

    パイチャートのプロパティ

    PropTypeDefaultDescription
    sizenumber320生成されるSVGイメージのサイズ (px単位)
    tooltipbooleanfalseホバー時のツールチップの有効化
    datasetsarray[]チャートのデータセット 配列 datasets の各オブジェクトは、以下のプロパティを持ちます。
    /** Dataset value */
    value: number;
    /** Dataset HEX color */
    color?: string;
    /** Dataset label */
    label?: string;
    format-tooltipfunction(data)tooltipのHTMLコンテンツを返さなければならないカスタムレンダリング関数。受信した data オブジェクトには、以下のプロパティがあります。
    index: number;
    value: number;
    label: string;
    color: string;
    percentage: number;

    パイチャートのイベント

    EventArgumentsDescription
    select(index, item)Event will be triggered (when tooltip enabled) on chart hover

    Examples

    <template>
    <f7-page>
      <f7-navbar title="Pie Chart" />
      <f7-block-title>Simple Pie Chart</f7-block-title>
      <f7-block strong>
        <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>
        <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>
        <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>