赞助商成为赞助商

饼图

Framework7 配备简单易用的饼图组件。它可以制作出美观且完全响应的 SVG 图表。

饼状图布局

由于饼状图 SVG 是通过 JavaScript 生成的，因此它的 HTML 布局尽可能简单

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

饼状图应用程序方法

现在，我们需要创建/初始化饼状图。让我们看看相关的应用程序方法以进行操作

app.pieChart.create(parameters) - 创建饼状图实例

  • parameters - 对象。具有饼状图参数的对象

方法返回创建的饼状图实例

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

  • el - HTMLElement 或 字符串（带 CSS 选择器）或 对象。要销毁的饼状图元素或饼状图实例。

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

  • el - HTMLElement 或 字符串（带 CSS 选择器）。饼状图元素。

该方法返回饼状图实例

app.pieChart.update(parameters) - 根据传递的参数更新/重新呈现饼状图 SVG

  • parameters - 对象。具有饼状图参数的对象

该方法返回饼状图实例

饼状图参数

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

参数类型默认说明
elHTMLElement
字符串		饼状图元素。具有饼状图元素的 HTMLElement 或 CSS 选择器字符串。生成的 SVG 将被插入到此元素中
datasets数组[]图表数据集。datasets 数组中的每个对象具有以下属性
/** Dataset value */
value: number;
/** Dataset HEX color */
color?: string;
/** Dataset label */
label?: string;
尺寸数字320生成的 SVG 图像大小（以 px 为单位）
工具提示布尔值false启用悬停时的工具提示
datasets数组[]图表数据集。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;
上对象

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

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(事件, 处理程序)添加触发后将被删除的事件处理程序
pieChart.off(事件, 处理程序)删除事件处理程序
pieChart.off(事件)删除指定事件的所有处理程序
pieChart.emit(事件, ...参数)在实例上触发事件

饼状图事件

饼状图将在饼状图元素和应用和饼状图实例上触发以下 DOM 事件

DOM 事件

事件目标说明
piechart:select饼状图元素<div class="pie-chart">在图表悬停时（当启用工具提示时）触发事件
piechart:beforedestroy饼状图元素<div class="pie-chart">在销毁饼状图实例之前触发事件

应用程序和饼状图实例事件

饼状图实例会在自身实例和应用程序实例上发出事件。应用程序实例事件同名，但以 pieChart 开头。

事件参数目标说明
select(pieChart、index、数据集)pieChart在图表悬停时（当启用工具提示时）触发事件
pieChartSelect(pieChart、index、数据集)应用
beforeDestroy(pieChart)pieChart在销毁饼状图实例之前触发事件。作为参数，事件处理程序接收饼状图实例
pieChartBeforeDestroy(pieChart)应用

示例

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>
改善此文档
在此页面上