Chart

由绘图基础组件组合而成的柱状图和折线图。

MonTueWedThuFriSatSun

Visits

导入

import {
  Chart,
  ChartBody,
  ChartContent,
  ChartPlot,
  ChartGrid,
  ChartBars,
  ChartLine,
  ChartYAxisLabels,
  ChartAxisLabels,
  ChartLegend,
  ChartLegendItem,
} from "@pelagornis/page/components";

示例

上方预览渲染的就是这个文件。把它复制到 src/components/ 即可开始使用。

import {
  Chart,
  ChartAxisLabels,
  ChartBars,
  ChartBody,
  ChartContent,
  ChartGrid,
  ChartLegend,
  ChartLegendItem,
  ChartPlot,
  ChartYAxisLabels,
} from "@pelagornis/page/components";

const visits = [45, 52, 38, 65, 42, 80, 55];
const days = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];

export default function ChartDemo() {
  return (
    <Chart className="w-full">
      <ChartBody>
        <ChartContent>
          <ChartYAxisLabels values={visits} />
          <ChartPlot aria-label="Weekly page visits">
            <ChartGrid values={visits} />
            <ChartBars values={visits} seriesColor="brand" />
          </ChartPlot>
          <ChartAxisLabels labels={days} />
        </ChartContent>
      </ChartBody>
      <ChartLegend>
        <ChartLegendItem seriesColor="brand">Visits</ChartLegendItem>
      </ChartLegend>
    </Chart>
  );
}

在 MDX 中使用

Chart 由共享 React 状态的多个部件组成。写在 MDX 中的子元素会各自渲染成独立的岛，部件之间无法互通。请像上面的示例一样在 .tsx 文件中组合，再导入该文件。

---
title: Example
---

import ChartExample from "../../components/ChartExample";

<ChartExample client:load />

client:load 会在页面加载时水合该岛。位于页面靠下位置的内容请使用 client:visible。

在 Markdoc 中使用

Markdoc 标签渲染的是 Astro 组件，而这个组件需要客户端状态。请把示例包进一个负责水合的 .astro 文件，再把该文件注册为标签。

---
import ChartExample from "../ChartExample";
---

<ChartExample client:load />

import { component, defineMarkdocConfig } from "@astrojs/markdoc/config";
import starlightMarkdoc from "@astrojs/starlight-markdoc";
import pageMarkdoc from "@pelagornis/page/markdoc";

export default defineMarkdocConfig({
  extends: [starlightMarkdoc(), pageMarkdoc()],
  tags: {
    "chart-example": {
      render: component("./src/components/markdoc/ChartExample.astro"),
      selfClosing: true,
    },
  },
});

{% chart-example /%}

结构

组件的组成部分，以及每个部分渲染的 data-refineui 角色。

部件	角色
`root`	chart
`axis_labels`	chart-axis-labels
`bar`	chart-bar
`bar_track`	chart-bar-track
`bars`	chart-bars
`body`	chart-body
`content`	chart-content
`grid`	chart-grid
`hit_area`	chart-hit-area
`legend`	chart-legend
`legend_item`	chart-legend-item
`line`	chart-line
`line_area`	chart-line-area
`line_stroke`	chart-line-stroke
`plot`	chart-plot
`plot_frame`	chart-plot-frame
`point`	chart-point
`tooltip`	chart-tooltip
`y_axis`	chart-y-axis

参考

设计指南和令牌细节见 RefineUI · Chart。
通用规则见在 MDX 中使用和在 Markdoc 中使用。