Rough Charts 使用教程

Rough Charts 使用教程

rough-charts 📈 A responsive, composable react charting library with a hand-drawn style. 项目地址: https://gitcode.com/gh_mirrors/ro/rough-charts

1. 项目介绍

Rough Charts 是一个响应式的、可组合的 React 图表库，具有手绘风格的视觉效果。它基于 d3 和 roughjs 构建，提供了灵活的图表组件，允许用户轻松组合各种图表元素，并渲染出独特的图形。Rough Charts 不仅适用于数据可视化，还能为应用增添一份独特的艺术感。

2. 项目快速启动

安装

首先，通过 npm 或 yarn 安装 Rough Charts：

# 使用 npm 安装
npm install rough-charts

# 使用 yarn 安装
yarn add rough-charts

基本使用

以下是一个简单的示例，展示如何使用 Rough Charts 创建一个折线图：

import React from 'react';
import { LineSeries, Tooltip, ChartProvider, XAxis, YAxis } from 'rough-charts';
import { colors } from './colors';

const data = [
  { name: 'A', value1: 30, value2: 35 },
  { name: 'B', value1: 90, value2: 17 },
  { name: 'C', value1: 50, value2: 23 },
  { name: 'D', value1: 40, value2: 15 },
  { name: 'E', value1: 70, value2: 39 },
  { name: 'G', value1: 30, value2: 25 },
  { name: 'H', value1: 100, value2: 31 },
  { name: 'I', value1: 110, value2: 32 },
];

const App = () => (
  <ChartProvider height={400} data={data}>
    <XAxis dataKey="name" />
    <YAxis />
    <LineSeries dataKey="value1" options={{ stroke: colors[0], strokeWidth: 2 }} />
    <LineSeries dataKey="value2" options={{ stroke: colors[3], strokeWidth: 2 }} />
    <Tooltip />
  </ChartProvider>
);

export default App;

自定义字体

为了增强手绘风格，可以添加自定义字体：

<link href="https://fonts.googleapis.com/css?family=Patrick+Hand&display=swap" rel="stylesheet">
<style>
  * {
    font-family: 'Patrick Hand', cursive;
    font-size: 16px;
  }
</style>

3. 应用案例和最佳实践

应用案例

Rough Charts 适用于各种需要手绘风格的场景，如教育应用、儿童应用、创意项目等。例如，在一个儿童教育应用中，可以使用 Rough Charts 展示简单的统计数据，增强视觉吸引力。

最佳实践

1. 数据准备：确保数据格式符合 Rough Charts 的要求，通常为数组对象形式。
2. 组件组合：根据需求灵活组合 ChartProvider、XAxis、YAxis、LineSeries、Tooltip 等组件。
3. 样式调整：通过 options 属性调整线条颜色、宽度等，以达到最佳视觉效果。

4. 典型生态项目

Rough Charts 作为一个 React 图表库，可以与其他 React 生态项目无缝集成。以下是一些典型的生态项目：

• React Router：用于管理应用的路由，确保图表页面与其他页面之间的流畅切换。
• Redux：用于状态管理，特别是在需要从全局状态中获取数据时。
• Material-UI：提供丰富的 UI 组件，可以与 Rough Charts 结合使用，增强应用的整体视觉效果。

通过这些生态项目的结合，可以构建出功能强大且视觉效果独特的数据可视化应用。

rough-charts 📈 A responsive, composable react charting library with a hand-drawn style. 项目地址: https://gitcode.com/gh_mirrors/ro/rough-charts