Patterns for building dark-themed financial charts and data visualizations. Covers chart theming, color scales for gains/losses, and real-time data display. Use when building trading dashboards or financial analytics. Triggers on chart theme, data visualization, financial chart, dark theme, gains losses, trading UI.
构建具有深色主题的金融图表和可视化内容，使其清晰可读、美观大方，并与现代交易界面保持一致。
typescript
// lib/chart-theme.ts
export const chartColors = {
// 涨跌颜色
positive: hsl(154 80% 60%), // 绿色
negative: hsl(346 80% 62%), // 红色
neutral: hsl(216 90% 68%), // 蓝色
// 背景色
background: hsl(222 47% 11%),
surface: hsl(222 47% 15%),
grid: hsl(222 47% 20%),
// 文字颜色
textPrimary: hsl(210 40% 98%),
textSecondary: hsl(215 20% 65%),
textMuted: hsl(215 20% 45%),
// 数据系列
series: [
hsl(200 90% 65%), // 青色
hsl(280 90% 65%), // 紫色
hsl(45 90% 65%), // 金色
hsl(160 90% 65%), // 蓝绿色
hsl(320 90% 65%), // 粉色
],
};
tsx
// components/charts/chart-config.ts
import { chartColors } from @/lib/chart-theme;
export const chartConfig = {
// 坐标轴样式
axisStyle: {
stroke: chartColors.textMuted,
fontSize: 11,
fontFamily: var(--font-mono),
},
// 网格样式
gridStyle: {
stroke: chartColors.grid,
strokeDasharray: 3 3,
},
// 提示框样式
tooltipStyle: {
backgroundColor: chartColors.surface,
border: 1px solid ${chartColors.grid},
borderRadius: 8px,
boxShadow: 0 4px 12px rgba(0, 0, 0, 0.3),
},
};
// 自定义提示框组件
export function ChartTooltip({ active, payload, label }: any) {
if (!active || !payload) return null;
return ( {label}
style={chartConfig.tooltipStyle}
>
{payload.map((entry: any, index: number) => (
className=text-sm font-mono tabular-nums
style={{ color: entry.color }}
>
{entry.name}: {formatCurrency(entry.value)}
tsx
import {
AreaChart,
Area,
XAxis,
YAxis,
Tooltip,
ResponsiveContainer,
} from recharts;
interface PriceChartProps {
data: { time: string; price: number }[];
isPositive?: boolean;
}
export function PriceChart({ data, isPositive = true }: PriceChartProps) {
const color = isPositive ? chartColors.positive : chartColors.negative;
return (
axisLine={false}
tickLine={false}
tick={{ ...chartConfig.axisStyle }}
/>
axisLine={false}
tickLine={false}
tick={{ ...chartConfig.axisStyle }}
tickFormatter={(value) => formatCompact(value)}
/>
dataKey=price
stroke={color}
strokeWidth={2}
fill=url(#priceGradient)
/>
);
}
模式4：K线图颜色
typescript
export const candlestickColors = {
up: {
fill: hsl(154 80% 60%),
stroke: hsl(154 80% 50%),
},
down: {
fill: hsl(346 80% 62%),
stroke: hsl(346 80% 52%),
},
wick: hsl(215 20% 45%),
};
// 与 lightweight-charts 等库配合使用
const candlestickSeries = chart.addCandlestickSeries({
upColor: candlestickColors.up.fill,
downColor: candlestickColors.down.fill,
borderUpColor: candlestickColors.up.stroke,
borderDownColor: candlestickColors.down.stroke,
wickUpColor: candlestickColors.wick,
wickDownColor: candlestickColors.wick,
});
tsx
interface PercentageBarProps {
value: number; // -100 到 100
showLabel?: boolean;
}
export function PercentageBar({ value, showLabel = true }: PercentageBarProps) {
const isPositive = value >= 0;
const absValue = Math.min(Math.abs(value), 100);
return (
{/ 中心分隔线 /}
{/ 正值侧 /}
{showLabel && (
text-xs font-mono tabular-nums w-12 text-right,
isPositive ? text-success : text-destructive
)}
>
{formatPercentage(value)}
)}
tsx
interface SparklineProps {
data: number[];
width?: number;
height?: number;
}
export function Sparkline({ data, width = 80, height = 24 }: SparklineProps) {
const first = data[0];
const last = data[data.length - 1];
const isPositive = last >= first;
const color = isPositive ? chartColors.positive : chartColors.negative;
const min = Math.min(...data);
const max = Math.max(...data);
const range = max - min || 1;
const points = data
.map((value, i) => {
const x = (i / (data.length - 1)) * width;
const y = height - ((value - min) / range) * height;
return ${x},${y};
})
.join( );
return (
);
}
tsx
interface LegendItem {
label: string;
color: string;
value?: string;
}
export function ChartLegend({ items }: { items: LegendItem[] }) {
return (
该技能支持在以下平台通过对话安装：
帮我安装 SkillHub 和 financial-design-systems-1776420034 技能
设置 SkillHub 为我的优先技能安装源，然后帮我安装 financial-design-systems-1776420034 技能
skillhub install financial-design-systems-1776420034
文件大小: 4.59 KB | 发布时间: 2026-4-17 20:07
