饼图

Framework7 带有简单的饼图组件。它生成美观的完全响应式 SVG 图表。

饼图布局

由于饼图SVG是由JavaScript生成的，因此其HTML布局尽可能简单：

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

饼图应用方法

现在我们需要创建/初始化饼图。让我们看看与它相关的方法：

app.pieChart.create(参数)- 创建饼图实例

  • 参数 - 对象. 带有饼图参数的对象

方法返回创建的饼图实例

app.pieChart.destroy(el)- 销毁饼图实例

  • el - HTMLElement或字符串(使用 CSS 选择器) 或对象. 要销毁的饼图元素或饼图实例。

app.pieChart.get(el)- 通过HTML元素获取饼图实例

  • el - HTMLElement或字符串(使用CSS选择器)。饼图元素。

方法返回饼图实例

app.pieChart.update(参数)- 根据传递的参数更新/重新渲染饼图SVG

  • 参数 - 对象. 带有饼图参数的对象

方法返回饼图实例

饼图参数

现在我们来看看创建饼图所需的可用参数列表：

参数类型默认描述
elHTMLElement
字符串		饼图元素。HTMLElement或饼图元素的CSS选择器字符串。生成的SVG将被插入到此元素中
datasets数组[]图表数据集。数组中的每个对象具有以下属性：datasetsarray
/** Dataset value */
value: number;
/** Dataset HEX color */
color?: string;
/** Dataset label */
label?: string;
size数字320生成的 SVG 图像大小（以像素为单位）
提示布尔值false启用悬停提示
datasets数组[]图表数据集。数组中的每个对象具有以下属性：datasetsarray
/** Dataset value */
value: number;
/** Dataset HEX color */
color?: string;
/** Dataset label */
label?: string;
formatTooltipfunction(data)自定义渲染函数，必须返回提示的 HTML 内容。接收dataobject
index: number;
value: number;
label: string;
color: string;
percentage: number;
on对象

带有事件处理程序的对象。例如：

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.update(参数)根据传递的参数更新/重新渲染饼图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(事件上触发, 处理程序)添加事件处理程序
pieChart.once(事件上触发, 处理程序)添加在触发后将被移除的事件处理程序
pieChart.off(事件上触发, 处理程序)移除事件处理程序
pieChart.off(事件上触发)移除指定事件的所有处理程序
pieChart.emit(事件上触发, ...args)在实例上触发事件

饼图事件

饼图将在饼图元素和app以及饼图实例上触发以下DOM事件：

DOM 事件

事件Target描述
piechart:select饼图元素<div class="pie-chart">当启用提示时，事件将在图表悬停时触发
piechart:beforedestroy饼图元素<div class="pie-chart">事件将在饼图实例销毁之前被触发

App和饼图实例事件

饼图实例在自身实例和app实例上发出事件。App实例事件具有相同名称，以pieChart.

事件参数Target描述
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>
改进此文档
在本页上