面积图 React 组件

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

面积图组件

包含以下组件

AreaChart

面积图属性

参数	类型	默认	描述
id	字符串		图表元素 ID 属性
width	数字	640	生成的 SVG 图像宽度（以像素为单位）
height	数字	320	生成的 SVG 图像高度（以像素为单位）
datasets	数组	[]	图表数据集。`datasets` 数组中的每个对象具有以下属性 `/** Dataset value / values: number[]; /* Dataset HEX color / color?: string; /* Dataset label */ label?: string;`
lineChart	布尔值	false	启用折线图（而不是面积图）
axis	布尔值	false	启用图表水平（X）轴
axisLabels	数组	[]	图表水平（X）轴标签。应该同数据集值具有相同数量的项目
工具提示	布尔值	false	启用悬停工具提示
图例	布尔值	false	启用图表图例
切换数据集	布尔值	false	启用后，它将在点击图例项目时切换数据集
最大轴标签	数字	8	在轴上可见的轴标签（刻度）的最大数量
格式化轴标签	function(标签)		用于格式化轴标签文本的自定义渲染函数
格式化图例标签	function(标签)		用于格式化图例标签文本的自定义渲染函数
格式化工具提示	function(数据)		用于返回工具提示的 HTML 内容的自定义渲染函数。接收到的`数据`对象具有以下属性 `index: number; total: number; datasets: { color?: string; label: any; value: number; }`
格式化工具提示轴标签	function(标签)		用于格式化工具提示中轴标签文本的自定义渲染函数
格式化工具提示总计	function(总计)		用于格式化工具提示中总计值文本的自定义渲染函数
格式化工具提示数据集	function(标签、值、颜色)		用于格式化工具提示中数据集文本的自定义渲染函数

面积图事件

事件	参数	描述
选择	(索引)	在图表悬停时，将触发此事件（当启用工具提示时）

示例

area-chart.jsx

import React from 'react';
import { Page, Navbar, BlockTitle, Block, AreaChart } from 'framework7-react';

export default () => {
  // 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' });

  return (
    <Page>
      <Navbar title="Area Chart" />
      <Block strongIos outlineIos>
        <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>
      </Block>
      <BlockTitle>Simple Area Chart</BlockTitle>
      <Block strongIos outlineIos>
        <AreaChart
          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],
            },
          ]}
        />
      </Block>
      <BlockTitle>Area Chart With Tooltip</BlockTitle>
      <Block strongIos outlineIos>
        <AreaChart
          tooltip
          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],
            },
          ]}
        />
      </Block>
      <BlockTitle>Area Chart With Axis</BlockTitle>
      <Block strongIos outlineIos>
        <AreaChart
          tooltip
          axis
          axisLabels={dates}
          formatAxisLabel={(date) => axisDateFormat.format(date)}
          formatTooltipAxisLabel={(date) => 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],
            },
          ]}
        />
      </Block>
      <BlockTitle>Area Chart With Legend</BlockTitle>
      <Block strongIos outlineIos>
        <AreaChart
          tooltip
          axis
          axisLabels={dates}
          legend
          toggleDatasets
          formatAxisLabel={(date) => axisDateFormat.format(date)}
          formatTooltipAxisLabel={(date) => 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],
            },
          ]}
        />
      </Block>
      <BlockTitle>Lines Chart</BlockTitle>
      <Block strongIos outlineIos>
        <AreaChart
          tooltip
          axis
          axisLabels={dates}
          legend
          toggleDatasets
          lineChart
          formatAxisLabel={(date) => axisDateFormat.format(date)}
          formatTooltipAxisLabel={(date) => 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],
            },
          ]}
        />
      </Block>
    </Page>
  );
};

改进此文档

在本页

面积图组件
面积图属性
面积图事件
示例