自动图

用于在Automattic产品中显示交互式数据可视化的综合图表库. 建于现代图书馆之上 @visx/xychart 并设计为无障碍、响应和方便使用.

探索现有图表及其文档 故事书。 。 。 .

所需资源

• 节点.js页:1
• 反应: 18.x或19.x (中文(简体) )

快速启动

安装

npm install @automattic/charts
# or
pnpm add @automattic/charts
# or
yarn add @automattic/charts

导入组件

从主入口导入图表组件 :

import { LineChart, BarChart, PieChart } from '@automattic/charts';
import '@automattic/charts/style.css';

现代捆绑者树摇未用 JavaScript 自动,所以只将您导入的图表组件包含在您的捆绑中 。 请注意: style.css 包括所有图表的样式.

其他条目点

关于公用事业和辅助部件,有单独的切入点:

• @automattic/charts/hooks - 反应钩
• @automattic/charts/providers - 上下文提供者
• @automattic/charts/utils - 共享图表工具功能
• @automattic/charts/visx/group - Visx集团公用事业
• @automattic/charts/visx/legend - 维斯克传说的公用事业
• @automattic/charts/visx/text - Visx文本设施

可用样式导入

• @automattic/charts/style.css - 所有图表样式

基本用途示例

import React from 'react';
import { LineChart } from '@automattic/charts';
import '@automattic/charts/style.css';

const data = [
    { date: new Date( '2024-01-01' ), value: 10 },
    { date: new Date( '2024-01-02' ), value: 90 }, // Sharp rise
    { date: new Date( '2024-01-03' ), value: 85 }, // Slight decline
    { date: new Date( '2024-01-04' ), value: 82 }, // Gradual decline
    { date: new Date( '2024-01-05' ), value: 5 }, // Sharp drop
    { date: new Date( '2024-01-06' ), value: 8 }, // Slight rise
    { date: new Date( '2024-01-07' ), value: 10 }, // Gradual rise
];

function MyComponent() {
    return <LineChart data={ data } width={ 400 } height={ 300 } />;
}

在您的 WordPress 插件中使用此软件包

如果您计划在 WordPress 插件中使用此软件包, 我们建议您使用 自动装载机 作为你的自动装载器。 这将允许与其他也使用此软件包的插件实现最大限度的互操作性.

捐款

准备好了吗? 看看这个 Jetpack 贡献指南 编辑 图表 AI 文档指南 关于增加新特点和文件的详细信息.

地方发展与故事书

为了在当地运行故事书,从单行本的根部遵循这些步骤:

1. 运行 pnpm install 以安装依赖.
2. 运行 cd projects/js-packages/charts 以导航图表包.
3. 运行 pnpm run storybook 启动故事本服务器.

警卫

需要报告安全弱点吗? 转到 https://automattic.com/security/ (中文(中国大陆) ) 或者直接到我们的安全漏洞赏金网站 https://hackerone.com/自失常症。 。 。 .

许可证

图表根据 GNU 通用公共许可证 v2( 或以后)