赞助商成为赞助商

面积图

Framework7 包含一个简单的面积图组件。它生成美观且完全响应的 SVG 图表。

面积图布局

因为面积图 SVG 是由 JavaScript 生成的，所以其 HTML 布局尽可能简单

<!-- Area Chart element -->
<div class="area-chart"></div>

面积图应用程序方法

现在我们需要创建/初始化面积图。我们来看一下相关应用程序方法来处理它

app.areaChart.create(parameters)- 创建面积图实例

  • parameters - object。具有面积图参数的对象

方法返回已创建面积图的实例

app.areaChart.destroy(el)- 销毁面积图实例

  • el - HTMLElement 或 string（带有 CSS 选择器）或 object。要销毁的面积图元素或面积图实例。

app.areaChart.get(el)- 通过 HTML 元素获取面积图实例

  • el - HTMLElement 或 string（带有 CSS 选择器）。面积图元素。

方法返回面积图实例

app.areaChart.update(parameters)- 根据传递的参数更新/重新渲染面积图 SVG

  • parameters - object。具有面积图参数的对象

方法返回面积图实例

面积图参数

现在我们来看一下要创建面积图所需的可用参数列表

参数类型默认说明
elHTMLElement
string		面积图元素。面积图元素的 HTMLElement 或带有 CSS 选择器的字符串。生成的 SVG 将插入到此元素中
widthnumber640生成的 SVG 图像宽度（以像素为单位）
heightnumber320生成的 SVG 图像高度（以像素为单位）
datasetsarray[]图表数据集。datasets 数组中的每个对象具有以下属性
/** Dataset value */
values: number[];
/** Dataset HEX color */
color?: string;
/** Dataset label */
label?: string;
lineChartbooleanfalse启用线图（而不是面积图）
axisbooleanfalse启用图表水平（X）轴
axisLabelsarray[]图表水平（X）轴标签。应与数据集值具有相同数量的项
tooltipbooleanfalse启用悬浮时的工具提示
legendbooleanfalse启用图标例
toggleDatasetsbooleanfalse启用后，它将在图表例项单击时切换数据集
maxAxisLabelsnumber8要显示在轴上的最大数量的轴标签（刻度）
formatAxisLabelfunction(label)格式化轴标签文本的自定义渲染函数
formatLegendLabelfunction(label)格式化图表例标签文本的自定义渲染函数
formatTooltipfunction(data)自定义渲染函数，它必须返回工具提示的 HTML 内容。接收到的 data 对象具有以下属性
index: number;
total: number;
datasets: {
  color?: string;
  label: any;
  value: number;
}
formatTooltipAxisLabelfunction(label)格式化工具提示中轴标签文本的自定义渲染函数
formatTooltipTotalfunction(total)格式化工具提示中总值文本的自定义渲染函数
formatTooltipDatasetfunction(label, value, color)自定义渲染函数，用于在工具提示中设置数据集文本格式
on对象

包括事件处理程序的对象。例如

var areaChart = app.areaChart.create({
  el: '.area-chart',
  on: {
    beforeDestroy: function () {
      console.log('Area Chart will be destroyed')
    }
  }
})

面积图方法和属性

因此，要创建面积图，我们必须调用

var areaChart = app.areaChart.create({ /* parameters */ })

然后，我们可以获得其初始化实例（如上例中的 areaChart 变量），它具有有用的方法和属性

属性
areaChart.app指向全局应用实例的链接
areaChart.el面积图 HTML 元素
areaChart.$elDom7 实例，其中包括面积图 HTML 元素
areaChart.svgEl面积图生成的 SVG HTML 元素
areaChart.$svgElDom7 实例，其中包括生成的 SVG HTML 元素
areaChart.params面积图参数
方法
areaChart.update(参数)根据传入的参数更新/重新渲染面积图 SVG 元素。它接受与面积图初始化所需参数相同的对象。你只需传递需要更新的参数即可，例如
var areaChart = app.areaChart.create({
  datasets: datasetsA,
  // ...
});

// and when we need to update rendered SVG based on new datasets:
areaChart.update({
  datasets: datasetsB,
});
areaChart.destroy()销毁面积图实例
areaChart.on(事件, 处理程序)添加事件处理程序
areaChart.once(事件, 处理程序)添加事件处理程序，在触发该处理程序后将其移除
areaChart.off(事件, 处理程序)移除事件处理程序
areaChart.off(事件)移除指定事件的所有处理程序
areaChart.emit(事件, ...args)触发实例上的事件

面积图事件

面积图会在面积图元素上触发以下 DOM 事件以及应用和面积图实例上的事件

DOM 事件

事件目标说明
areachart:select面积图元素<div class="area-chart">当启用工具提示时，在图表悬停时会触发事件
areachart:beforedestroy面积图元素<div class="area-chart">在销毁面积图实例之前触发事件

应用和面积图实例事件

面积图实例会在自身实例和应用实例上发出事件。应用实例事件具有相同的名称，前缀为 areaChart。

事件参数目标说明
选择(areaChart, index)areaChart当启用工具提示时，在图表悬停时会触发事件
areaChartSelect(areaChart, index)应用
beforeDestroy(areaChart)areaChart在销毁面积图实例之前触发事件。作为参数，事件处理程序接收面积图实例
areaChartBeforeDestroy(areaChart)应用

CSS 变量

以下是相关 CSS 变量（CSS 自定义属性）列表。

:root {
  --f7-area-chart-current-line-stroke-width: 2px;
  --f7-area-chart-current-line-stroke: rgba(0, 0, 0, 0.15);
  --f7-area-chart-axis-text-color: inherit;
  --f7-area-chart-axis-height: 1px;
  --f7-area-chart-axis-font-size: 10px;
  --f7-area-chart-axis-font-weight: 500;
  --f7-area-chart-tooltip-font-size: 12px;
  --f7-area-chart-tooltip-total-font-size: 16px;
  --f7-area-chart-tooltip-total-font-weight: bold;
  --f7-area-chart-tooltip-color-size: 10px;
  --f7-area-chart-legend-font-size: 14px;
  --f7-area-chart-legend-font-weight: 500;
  --f7-area-chart-legend-text-color: inherit;
  --f7-area-chart-legend-padding: 4px 8px;
  --f7-area-chart-legend-border-radius: 4px;
  --f7-area-chart-legend-color-size: 14px;
  --f7-area-chart-line-stroke-width: 2px;
  --f7-area-chart-axis-bg-color: rgba(0, 0, 0, 0.15);
  --f7-area-chart-legend-disabled-text-color: rgba(0, 0, 0, 0.22);
}
:root .dark,
:root.dark {
  --f7-area-chart-axis-bg-color: rgba(255, 255, 255, 0.15);
  --f7-area-chart-legend-disabled-text-color: rgba(255, 255, 255, 0.22);
}
.ios {
  --f7-area-chart-tooltip-total-label-text-color: rgba(255, 255, 255, 0.75);
}
.md {
  --f7-area-chart-tooltip-total-label-text-color: inherit;
}

示例

area-chart.html
<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner">
        <div class="title">Area 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 Area Chart component.</p>
        <p>Area Chart generates SVG layout which makes it also compatible with SSR (server side rendering).</p>
      </div>
      <div class="block-title">Simple Area Chart</div>
      <div class="block block-strong-ios block-outline-ios">
        <div class="area-chart area-chart-simple"></div>
      </div>
      <div class="block-title">Area Chart With Tooltip</div>
      <div class="block block-strong-ios block-outline-ios">
        <div class="area-chart area-chart-with-tooltip"></div>
      </div>
      <div class="block-title">Area Chart With Axis</div>
      <div class="block block-strong-ios block-outline-ios">
        <div class="area-chart area-chart-with-axis"></div>
      </div>
      <div class="block-title">Area Chart With Legend</div>
      <div class="block block-strong-ios block-outline-ios">
        <div class="area-chart area-chart-with-legend"></div>
      </div>
      <div class="block-title">Lines Chart</div>
      <div class="block block-strong-ios block-outline-ios">
        <div class="area-chart area-chart-lines"></div>
      </div>
    </div>
  </div>
</template>
<script>
  export default (props, { $f7, $onMounted, $onBeforeUnmount }) => {
    let areaSimple;
    let areaWithTooltip;
    let areaWithAxis;
    let areaWithLegend;
    let areaLines;

    // helpers data for axis
    const dates = [];
    const today = new Date();
    const year = today.getFullYear();
    const month = today.getMonth();
    for (let i = 0; i < 4; i += 1) {
      dates.push(new Date(year, month - (3 - i)))
    }
    const axisDateFormat = Intl.DateTimeFormat(undefined, { month: 'short', year: 'numeric' })
    const tooltipDateFormat = Intl.DateTimeFormat(undefined, { month: 'long', year: 'numeric' })

    $onMounted(() => {
      areaSimple = $f7.areaChart.create({
        el: '.area-chart-simple',
        datasets: [
          {
            color: '#f00',
            values: [0, 100, 250, 300, 175, 400]
          },
          {
            color: '#00f',
            values: [100, 75, 133, 237, 40, 200]
          },
          {
            color: '#ff0',
            values: [100, 300, 127, 40, 250, 80]
          },
        ]
      });
      areaWithTooltip = $f7.areaChart.create({
        el: '.area-chart-with-tooltip',
        tooltip: true,
        datasets: [
          {
            label: 'Red data',
            color: '#f00',
            values: [100, 75, 133, 237, 40, 200]
          },
          {
            label: 'Blue data',
            color: '#00f',
            values: [100, 300, 127, 40, 250, 80]
          },
          {
            label: 'Yellow data',
            color: '#ff0',
            values: [0, 100, 250, 300, 175, 400]
          },
        ]
      });

      areaWithAxis = $f7.areaChart.create({
        el: '.area-chart-with-axis',
        tooltip: true,
        axis: true,
        axisLabels: dates,
        formatAxisLabel(date) {
          return axisDateFormat.format(date);
        },
        formatTooltipAxisLabel(date) {
          return tooltipDateFormat.format(date);
        },
        datasets: [
          {
            label: 'Green data',
            color: '#0f0',
            values: [100, 75, 133, 237]
          },
          {
            label: 'Red data',
            color: '#f00',
            values: [100, 300, 127, 47]
          },
          {
            label: 'Yellow data',
            color: '#ff0',
            values: [0, 100, 250, 307]
          },
        ]
      });

      areaWithLegend = $f7.areaChart.create({
        el: '.area-chart-with-legend',
        tooltip: true,
        axis: true,
        axisLabels: dates,
        legend: true,
        toggleDatasets: true,
        formatAxisLabel(date) {
          return axisDateFormat.format(date);
        },
        formatTooltipAxisLabel(date) {
          return tooltipDateFormat.format(date);
        },
        datasets: [
          {
            label: 'Red data',
            color: '#f00',
            values: [100, 300, 127, 47]
          },
          {
            label: 'Blue data',
            color: '#00f',
            values: [100, 75, 133, 237]
          },
          {
            label: 'Yellow data',
            color: '#ff0',
            values: [0, 100, 250, 307]
          },
        ]
      });

      areaLines = $f7.areaChart.create({
        el: '.area-chart-lines',
        tooltip: true,
        axis: true,
        axisLabels: dates,
        legend: true,
        toggleDatasets: true,
        lineChart: true,
        formatAxisLabel(date) {
          return axisDateFormat.format(date);
        },
        formatTooltipAxisLabel(date) {
          return tooltipDateFormat.format(date);
        },
        datasets: [
          {
            label: 'Red data',
            color: '#f00',
            values: [0, 300, 127, 47]
          },
          {
            label: 'Blue data',
            color: '#00f',
            values: [0, 75, 133, 237]
          },
          {
            label: 'Green data',
            color: '#0f0',
            values: [0, 100, 250, 307]
          },
        ]
      });
    })

    $onBeforeUnmount(() => {
      areaSimple.destroy();
      areaWithTooltip.destroy();
      areaWithAxis.destroy();
      areaWithLegend.destroy();
      areaLines.destroy();
    })

    return $render;
  }
</script>
改进此文档
在此页面上