第一张图表

在 Vue、React 或纯 HTML 中，用你自己的数据渲染一张 K 线图，无需任何行情后端。

想最快看到一张图表，就把数据直接交给它。本页通过 customData 传入几百根 K 线，图表直接绘制，不涉及任何行情服务。

准备 K 线数据

图表读取的是 KLineData：一个毫秒级 timestamp，加上 open、high、low、close，volume 可选。任何符合这个结构的数组都可以。下面的辅助函数会生成一段平滑的序列，方便上手。

bars.ts

import type { KLineData } from '@363045841yyt/klinechart-core'

export function makeBars(count: number): KLineData[] {
  const day = 86_400_000
  const start = Date.UTC(2026, 0, 1)
  let close = 100
  return Array.from({ length: count }, (_, i) => {
    const open = close
    close = open + Math.sin(i / 8) * 1.5 + Math.cos(i / 3) * 0.6
    return {
      timestamp: start + i * day,
      open,
      high: Math.max(open, close) + 0.8,
      low: Math.min(open, close) - 0.8,
      close,
      volume: 10_000 + Math.round(Math.abs(Math.sin(i / 5)) * 8_000),
    }
  })
}

customData 在 K 线之外再补充一点上下文。market 和 data 必填，symbol 和 period 用于标注这条序列。

const customData = {
  market: 'CN',
  symbol: 'DEMO',
  period: 'daily',
  data: makeBars(240),
}

渲染

图表会撑满父容器。请给父容器，或 <kline-chart> 元素本身，设置一个明确的高度。

App.vue

<script setup lang="ts">
import { KlineChart, type CustomDataSource } from '@363045841yyt/klinechart'
import { makeBars } from './bars'

const customData: CustomDataSource = {
  market: 'CN',
  symbol: 'DEMO',
  period: 'daily',
  data: makeBars(240),
}
</script>

<template>
  <div class="chart-host">
    <KlineChart :custom-data="customData" />
  </div>
</template>

<style>
.chart-host {
  height: 480px;
}
</style>

别忘了在入口文件中引入一次 @363045841yyt/klinechart/style.css。

KLineChartWC 会把 zoomLevels 这类布局属性转成 attribute 传下去，但 customData 这样的对象不会转发。需要通过 ref 拿到元素，把它设为 JavaScript 属性。

Chart.tsx

'use client'

import { useEffect, useRef } from 'react'
import { KLineChartWC, type KLineChartWCHandle } from '@363045841yyt/klinechart-react'
import type { CustomDataSource } from '@363045841yyt/klinechart-core'
import { makeBars } from './bars'

const customData: CustomDataSource = {
  market: 'CN',
  symbol: 'DEMO',
  period: 'daily',
  data: makeBars(240),
}

type ChartElement = KLineChartWCHandle & { customData?: CustomDataSource }

export function Chart() {
  const ref = useRef<KLineChartWCHandle>(null)

  useEffect(() => {
    const el = ref.current as ChartElement | null
    if (!el) return
    // 封装组件会在客户端延迟注册 <kline-chart>。
    void customElements.whenDefined('kline-chart').then(() => {
      el.customData = customData 
    })
  }, [])

  return <KLineChartWC ref={ref} style={{ display: 'block', height: 480 }} />
}

'use client' 用于支持服务端组件的框架，例如 Next.js App Router。

index.html

<kline-chart id="chart" style="display: block; height: 480px"></kline-chart>

<script type="module">
  import '@363045841yyt/klinechart/web-component'

  const day = 86_400_000
  const start = Date.UTC(2026, 0, 1)
  let close = 100
  const data = Array.from({ length: 240 }, (_, i) => {
    const open = close
    close = open + Math.sin(i / 8) * 1.5
    return {
      timestamp: start + i * day,
      open,
      high: Math.max(open, close) + 0.8,
      low: Math.min(open, close) - 0.8,
      close,
    }
  })

  const el = document.getElementById('chart')
  el.customData = { market: 'CN', symbol: 'DEMO', period: 'daily', data } 
</script>