关于 layerchart-svelte5
为使用 LayerChart 与 Svelte 5 构建图表的开发者提供模式参考，涵盖基于 snippet 的提示框和图表上下文写法、提示框模式及图表示例；Svelte 5 需使用 `next` 包标签。
主要功能
- 01使用 `layerchart@next` 配置 Svelte 5
- 02基于 snippet 的提示框写法
- 03图表上下文与渐变 snippet
- 04按图表类型选择提示框模式
- 05面积、柱状、饼图及图形参考
适用场景
- 01构建带 band 提示框的柱状图
- 02为时间序列添加 bisect-x 提示框
- 03用 quadtree 提示框创建散点图
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/layerchart-svelte5确认已加载。
包含的文件
除 SKILL.md 外，安装时一起下载的参考资料和脚本。
references/full-patterns.mdgraph-patterns.mdtooltip-modes.mdREADME 原文English
来自项目 READMEREADME 暂无中文译文，以下为英文原文；中文介绍见上方。
LayerChart Svelte 5
Docs: next.layerchart.com (NOT layerchart.com - that's Svelte 4)
Install
npm i layerchart@next d3-scale
CRITICAL: Use @next tag. Stable (1.x) is Svelte 4 only.
Quick Start
<Chart {data} x="date" y="value" tooltip={{ mode: 'bisect-x' }}>
<Svg><Area class="fill-primary/20" /><Highlight points /></Svg>
<Tooltip.Root>{#snippet children({ data })}{data.value}{/snippet}</Tooltip.Root>
</Chart>
Core Patterns
- Tooltip:
{#snippet children({ data })}- NOTlet:data - Chart context:
{#snippet children({ context })} - Gradient:
{#snippet children({ gradient })} - Enable tooltip:
tooltip={{ mode: 'band' | 'bisect-x' }} - Type data:
{#snippet children({ data }: { data: MyType })}
Tooltip Modes
| Mode | Use Case |
|---|---|
band | Bar charts (scaleBand) |
bisect-x | Time-series area/line |
quadtree-x | Area (nearest x) |
quadtree | Scatter plots |
References
- full-patterns.md - Area, Bar, Pie, Calendar
- tooltip-modes.md - All modes
- graph-patterns.md - ForceGraph, zoom/pan
评论
支持 Markdown