贊助者成為贊助者

區域圖表 React 元件

Framework7 附帶簡單的區域圖表元件。它會產生美觀且完全回應式的 SVG 圖表。

區域圖表元件

包含下列元件

區域圖表屬性

屬性類型預設值說明
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) 軸標籤。應與資料集值有相同數量的項目
tooltip布林值false將滑鼠移到上方時啟用工具提示
legend布林值false啟用圖表圖例
toggleDatasets布林值false啟用時，它會在圖例項目上按一下時切換資料集
maxAxisLabels數字8軸上可見的軸標籤 (刻度) 的最大數量
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)自訂的渲染函式，用於設定工具提示中的資料集文字格式

區域圖表事件

事件引數說明
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>
  );
};
改善此文件
在此頁面上