v6.3.3
Support Framework7
logo_github stars forks
logo_applelogo_androiddevice_desktop
スポンサー
Support Framework7

パイチャート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>