开发预览更新于 2026-05-10

CandlestickChart K 线图

OHLC 蜡烛图，涨绿跌红，wick + body。

基础用法

数据通过 props 传入，纯 SVG 渲染，无第三方图表库依赖。配色取自 --viz-1..8 token，色盲友好。

背景

<script setup lang="ts">
import { CfCandlestickChart } from '@chufix-design/vue';
const data = [
  { open: 100, close: 108, high: 112, low: 98 },
  { open: 108, close: 105, high: 110, low: 103 },
  { open: 105, close: 115, high: 117, low: 104 },
  { open: 115, close: 110, high: 118, low: 108 },
  { open: 110, close: 120, high: 122, low: 109 },
  { open: 120, close: 118, high: 124, low: 116 },
  { open: 118, close: 125, high: 128, low: 117 },
  { open: 125, close: 122, high: 127, low: 120 },
  { open: 122, close: 130, high: 132, low: 121 },
  { open: 130, close: 128, high: 133, low: 126 },
];
</script>

<template>
  <CfCandlestickChart :data="data" />
</template>

<CfCandlestickChart ... />

上行 / 下行趋势

红绿涨跌染色由 close >= open 自动判定，wick 与 body 同色。

背景

↑ 上行

↓ 下行

<script setup lang="ts">
import { CfCandlestickChart } from '@chufix-design/vue';
const trendUp = [
  { open: 100, close: 105, high: 108, low: 98 },
  { open: 105, close: 112, high: 114, low: 103 },
  { open: 112, close: 110, high: 116, low: 108 },
  { open: 110, close: 118, high: 120, low: 109 },
  { open: 118, close: 124, high: 128, low: 117 },
  { open: 124, close: 130, high: 132, low: 122 },
  { open: 130, close: 138, high: 140, low: 128 },
];
const trendDown = [
  { open: 200, close: 192, high: 202, low: 188 },
  { open: 192, close: 196, high: 198, low: 188 },
  { open: 196, close: 184, high: 198, low: 180 },
  { open: 184, close: 178, high: 188, low: 174 },
  { open: 178, close: 172, high: 182, low: 168 },
  { open: 172, close: 165, high: 175, low: 160 },
  { open: 165, close: 158, high: 170, low: 154 },
];
</script>

<template>
  <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px;">
    <div>
      <div style="font-size: 11px; color: var(--status-success); margin-bottom: 4px; font-family: var(--font-mono);">↑ 上行</div>
      <CfCandlestickChart :data="trendUp" :height="180" />
    </div>
    <div>
      <div style="font-size: 11px; color: var(--status-error); margin-bottom: 4px; font-family: var(--font-mono);">↓ 下行</div>
      <CfCandlestickChart :data="trendDown" :height="180" />
    </div>
  </div>
</template>

<CfCandlestickChart data={ohlc} />

API

属性	类型	默认值	说明
`data`	`Candle[]`	`—`	{ open, high, low, close, label? }[]