diff --git a/src/views/DataBrowser/TradingViewChart.tsx b/src/views/DataBrowser/TradingViewChart.tsx index 88fd03d0..598d3f06 100644 --- a/src/views/DataBrowser/TradingViewChart.tsx +++ b/src/views/DataBrowser/TradingViewChart.tsx @@ -72,11 +72,6 @@ const TradingViewChart: React.FC = ({ if (!chartContainerRef.current || data.length === 0) return; try { - // 调试信息 - console.log('🔍 TradingView Chart - 开始初始化'); - console.log('📊 createChart 函数类型:', typeof createChart); - console.log('📊 LineSeries 类型:', LineSeries); - // 创建图表 (lightweight-charts 5.0 标准 API) const chart = createChart(chartContainerRef.current, { width: chartContainerRef.current.clientWidth, @@ -114,6 +109,23 @@ const TradingViewChart: React.FC = ({ borderColor: themeColors.border.default, timeVisible: true, secondsVisible: false, + rightOffset: 12, + barSpacing: 3, + fixLeftEdge: false, + lockVisibleTimeRangeOnResize: true, + rightBarStaysOnScroll: true, + borderVisible: true, + visible: true, + }, + localization: { + timeFormatter: (time: any) => { + // 格式化时间显示 + const date = new Date(time * 1000); + const year = date.getFullYear(); + const month = String(date.getMonth() + 1).padStart(2, '0'); + const day = String(date.getDate()).padStart(2, '0'); + return `${year}-${month}-${day}`; + }, }, handleScroll: { mouseWheel: true, @@ -126,28 +138,6 @@ const TradingViewChart: React.FC = ({ }, }); - // 调试信息 - console.log('📈 Chart 对象:', chart); - console.log('📈 Chart 类型:', typeof chart); - console.log('📈 Chart 的所有属性名:', Object.keys(chart)); - console.log('📈 Chart 的所有方法名:', Object.getOwnPropertyNames(Object.getPrototypeOf(chart))); - console.log('📈 addLineSeries 存在?', typeof chart.addLineSeries); - console.log('📈 addSeries 存在?', typeof chart.addSeries); - console.log('📈 Chart 原型:', Object.getPrototypeOf(chart)); - - // 检查 chart 对象是否有效 - if (!chart || typeof chart.addLineSeries !== 'function') { - console.error('❌ createChart 返回的对象无效!'); - console.error('Chart 对象:', chart); - console.error('尝试查找所有包含 "series" 的方法:'); - const allProps = Object.getOwnPropertyNames(Object.getPrototypeOf(chart)); - const seriesMethods = allProps.filter(prop => prop.toLowerCase().includes('series')); - console.error('包含 series 的方法:', seriesMethods); - - // 不要立即抛出错误,先尝试使用可能的替代方法 - console.warn('⚠️ 尝试使用其他可能的方法名...'); - } - // 创建折线系列 (lightweight-charts 5.0 使用 addSeries 方法) // 第一个参数是 series 类本身(不是实例) const lineSeries = chart.addSeries(LineSeries, { @@ -165,15 +155,18 @@ const TradingViewChart: React.FC = ({ title: metricName, }); - console.log('✅ LineSeries 创建成功'); - // 转换数据格式 + // lightweight-charts 5.0 需要 YYYY-MM-DD 格式的字符串作为 time const chartData: LineData[] = data .filter((item) => item.value !== null) - .map((item) => ({ - time: item.date as Time, - value: item.value as number, - })) + .map((item) => { + // 确保日期格式为 YYYY-MM-DD + const dateStr = item.date.trim(); + return { + time: dateStr as Time, + value: item.value as number, + }; + }) .sort((a, b) => { // 确保时间从左到右递增 const timeA = new Date(a.time as string).getTime(); @@ -181,6 +174,9 @@ const TradingViewChart: React.FC = ({ return timeA - timeB; }); + console.log('📊 转换后的图表数据(前3条):', chartData.slice(0, 3)); + console.log('📊 数据总数:', chartData.length); + // 设置数据 lineSeries.setData(chartData);