0.5.5 • Published 4d ago

@d3kline/renderer

Licence

MIT

Version

0.5.5

Deps

Size

880 kB

Vulns

Weekly

562

Summary Dependency Versions

d3kline-engine

面向浏览器运行时的 TypeScript 金融 K 线引擎
TypeScript-first financial K-line engine for browser runtime

简体中文 • English • GitHub Pages

项目简介 / Project Introduction

d3kline-engine 是一个基于 D3.js 的金融 K 线图表引擎，专为浏览器环境设计。它提供了高性能、可扩展的 K 线图表渲染能力，支持多种技术指标和交互功能。

d3kline-engine is a D3.js-based financial K-line chart engine designed for browser environments. It provides high-performance, extensible K-line chart rendering capabilities with support for multiple technical indicators and interactive features.

主要特性 / Key Features

TypeScript 优先 / TypeScript-first: 完整的类型定义，提供良好的开发体验
模块化架构 / Modular architecture: 核心包与渲染器分离，便于扩展
高性能渲染 / High-performance rendering: 基于 D3.js 的高效图表渲染
丰富的指标 / Rich indicators: 支持 MA、VOL 等常用技术指标
主题支持 / Theme support: 内置深色/浅色主题
响应式设计 / Responsive design: 自适应容器尺寸

快速开始 / Quick Start

环境要求 / Prerequisites

Node.js 20+
pnpm 10+

安装与运行 / Installation & Running

# 克隆仓库 / Clone repository
git clone https://github.com/RookieTao998/d3kline-engine.git
cd d3kline-engine

# 安装依赖 / Install dependencies
pnpm install

# 类型检查 / Type check
pnpm typecheck

# 构建项目 / Build project
pnpm build

# 运行测试 / Run tests
pnpm test

# 启动示例 / Start examples
pnpm dev:examples

启动后在浏览器打开 Vite 输出地址（通常是 http://localhost:5173）。
After starting, open the Vite output URL in your browser (usually http://localhost:5173).

在线示例 / Live Demo

访问 GitHub Pages 查看在线示例：
Visit GitHub Pages to see the live demo:

https://rookietao998.github.io/d3kline-engine/

包结构 / Package Structure

项目使用 pnpm 工作空间，包含以下包：
The project uses pnpm workspace with the following packages:

@d3kline/core: 共享契约、配置/状态工具与事件 / Shared contracts, option/state helpers, and events
@d3kline/renderer: 从 quant-web d3Kline 迁移的渲染运行时 / Renderer runtime migrated from quant-web d3Kline
@d3kline/engine: 聚合包，统一导出 core + renderer / Aggregation package, re-exports core + renderer
@d3kline/examples: 本地示例工程（不发布到 npm）/ Local playground (not published to npm)

使用示例 / Usage Example

import { D3KlineChart, type KLineData } from '@d3kline/renderer'

const host = document.getElementById('chart')!
const chart = new D3KlineChart(host, { theme: 'dark' })

const bars: KLineData[] = [
  { timestamp: 1712000000000, open: 100, high: 105, low: 98, close: 103, volume: 1200 },
  { timestamp: 1712000060000, open: 103, high: 108, low: 102, close: 107, volume: 980 },
]

chart.resetData(bars)
chart.loadIndicator({ name: 'MA' })
chart.loadIndicator({ name: 'VOL', isMain: false, height: 120 })

文档 / Documentation

用户指南（中文） / User Guide (Chinese): docs/USER_GUIDE.zh-CN.md
User Guide (English) / 用户指南（英文）: docs/USER_GUIDE.en.md
API 参考 / API Reference: docs/api-reference-for-agent.md
文档规范 / Documentation Policy: docs/DOCUMENTATION_POLICY.md

版本与发布 / Versioning & Release

项目使用 Changesets 管理版本。
The project uses Changesets for version management.

# 新建变更记录 / Create a changeset
pnpm changeset

# 根据变更记录提升版本号 / Apply package version bumps from changesets
pnpm version-packages

# 发布到 npm / Publish packages to npm
pnpm release

当前发布目标包 / Current publish targets: