区域图 React 组件

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

区域图组件

包含以下组件：

AreaChart

区域图属性

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

区域图事件

事件	参数	描述
select	(index)	当启用提示时，事件将在图表悬停时触发

示例

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>
  );
};

改进此文档

在本页上

区域图组件
区域图属性
区域图事件
示例