mcpField
C
charting

charting

github.com/claude-dev-suite数据与数据库4661 次安装4 天前更新
代码仓库

关于 charting

面向前端开发者的图表与数据可视化技能，介绍 Recharts、Chart.js、D3.js 等库的选择和使用要点，并涵盖响应式布局与生产检查。

主要功能

  1. 01比较多种图表库及适用场景
  2. 02提供 Recharts、Chart.js 和 D3.js 示例
  3. 03涵盖响应式尺寸与图表更新
  4. 04列出无障碍和加载状态检查
  5. 05提示大数据集聚合与抽样

适用场景

  1. 01为 React 仪表盘选择图表库
  2. 02构建自定义或复杂可视化
  3. 03检查图表的响应式和无障碍设计

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/claude-dev-suite/claude-dev-suite --skill charting

安装后在 Claude Code 中输入/charting确认已加载。

详细介绍

图表与数据可视化

Recharts（React — 推荐）

import {
  LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer,
  BarChart, Bar, PieChart, Pie, Cell,
} from 'recharts';

const data = [
  { month: 'Jan', revenue: 4000, users: 240 },
  { month: 'Feb', revenue: 3000, users: 198 },
  { month: 'Mar', revenue: 5000, users: 300 },
];

function RevenueChart() {
  return (
    <ResponsiveContainer width="100%" height={300}>
      <LineChart data={data}>
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis dataKey="month" />
        <YAxis />
        <Tooltip />
        <Line type="monotone" dataKey="revenue" stroke="#8884d8" strokeWidth={2} />
        <Line type="monotone" dataKey="users" stroke="#82ca9d" strokeWidth={2} />
      </LineChart>
    </ResponsiveContainer>
  );
}

// Bar Chart
function SalesChart() {
  return (
    <ResponsiveContainer width="100%" height={300}>
      <BarChart data={data}>
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis dataKey="month" />
        <YAxis />
        <Tooltip />
        <Bar dataKey="revenue" fill="#8884d8" radius={[4, 4, 0, 0]} />
      </BarChart>
    </ResponsiveContainer>
  );
}

Chart.js（框架无关）

import { Chart, registerables } from 'chart.js';
Chart.register(...registerables);

// With React wrapper
import { Line, Bar, Doughnut } from 'react-chartjs-2';

function SalesChart() {
  return (
    <Line
      data={{
        labels: ['Jan', 'Feb', 'Mar'],
        datasets: [{
          label: 'Revenue',
          data: [4000, 3000, 5000],
          borderColor: '#8884d8',
          tension: 0.3,
        }],
      }}
      options={{
        responsive: true,
        plugins: { legend: { position: 'top' } },
        scales: { y: { beginAtZero: true } },
      }}
    />
  );
}

D3.js（底层，控制力最强）

import * as d3 from 'd3';

function createBarChart(container: HTMLElement, data: { label: string; value: number }[]) {
  const margin = { top: 20, right: 20, bottom: 30, left: 40 };
  const width = 600 - margin.left - margin.right;
  const height = 400 - margin.top - margin.bottom;

  const svg = d3.select(container).append('svg')
    .attr('viewBox', `0 0 ${width + margin.left + margin.right} ${height + margin.top + margin.bottom}`)
    .append('g').attr('transform', `translate(${margin.left},${margin.top})`);

  const x = d3.scaleBand().domain(data.map((d) => d.label)).range([0, width]).padding(0.2);
  const y = d3.scaleLinear().domain([0, d3.max(data, (d) => d.value)!]).range([height, 0]);

  svg.append('g').attr('transform', `translate(0,${height})`).call(d3.axisBottom(x));
  svg.append('g').call(d3.axisLeft(y));

  svg.selectAll('rect').data(data).join('rect')
    .attr('x', (d) => x(d.label)!)
    .attr('y', (d) => y(d.value))
    .attr('width', x.bandwidth())
    .attr('height', (d) => height - y(d.value))
    .attr('fill', '#8884d8')
    .attr('rx', 4);
}

库选择

库最适合学习曲线
RechartsReact 仪表板低
Chart.js简单图表、任意框架低
D3.js自定义／复杂可视化高
ECharts大型数据集、地图中
NivoReact、丰富的图表类型低

反模式

反模式修正方法
未使用 ResponsiveContainer始终用它包裹图表，以适应不同尺寸
数据变化时重新渲染整个图表使用图表更新方法，而不是重新挂载
未聚合数据点过多的数据绘制图表前先聚合或抽样数据
异步数据没有加载状态加载时显示骨架屏／加载指示器
使用固定像素尺寸使用相对尺寸（%、viewBox）

生产环境检查清单

  • 所有图表都包裹在响应式容器中
  • 已处理加载和空状态
  • 符合无障碍要求：颜色对比度、ARIA 标签
  • 已针对大型数据集进行数据聚合
  • 所有图表使用一致的调色板
  • 工具提示格式清晰易读

评论

支持 Markdown