赞助商成为赞助商

面积图 Svelte 组件

Framework7 带有一个简单的面积图组件。它可以生成外观漂亮、完全响应式的 SVG 图表。

面积图组件

包含以下组件：

面积图属性

属性类型默认值描述
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.svelte
<script>
  import { Page, Navbar, BlockTitle, Block, AreaChart } from 'framework7-svelte';

  // 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' });
</script>

<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>
    <!-- prettier-ignore -->
    <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>
    <!-- prettier-ignore -->
    <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>
    <!-- prettier-ignore -->
    <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>
    <!-- prettier-ignore -->
    <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>
    <!-- prettier-ignore -->
    <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>
改进此文档
在此页面上