Add Top and Bottom

2025-04-24 19:31:01 +08:00
parent b849ce8ec8
commit 9cb242f706
7 changed files with 142 additions and 17 deletions
@@ -275,6 +275,10 @@
                            <input class="form-check-input" type="checkbox" id="showMacd" checked>
                            <label class="form-check-label" for="showMacd">MACD</label>
                        </div>
+                        <div class="form-check form-check-inline">
+                            <input class="form-check-input" type="checkbox" id="showKlcFxType">
+                            <label class="form-check-label" for="showKlcFxType">分型类型</label>
+                        </div>
                        <div class="form-check form-check-inline" style="display: none;">
                            <input class="form-check-input" type="checkbox" id="showTradePoints">
                            <label class="form-check-label" for="showTradePoints">买卖点</label>
@@ -730,6 +734,11 @@
            updateChartDisplay();
        });
        
+        // 添加分型类型复选框变更事件
+        $('#showKlcFxType').change(function() {
+            updateChartDisplay();
+        });
+        
        // 当选择不同的元素时间周期时
        $('#elementTimeframe').change(function() {
            const elementTimeframe = $(this).val();
@@ -916,6 +925,7 @@
                console.log('- 显示未完成中枢:', $('#showMainUncompletedZs').is(':checked'));
                console.log('- 显示MACD:', $('#showMacd').is(':checked'));
                console.log('- 显示买卖点:', $('#showTradePoints').is(':checked'));
+                console.log('- 显示分型类型:', $('#showKlcFxType').is(':checked'));
                
                // 重新初始化图表，这将清除旧图形并重新绘制
                initTradingView($('#symbol').val(), $('#timeframe').val());
@@ -2375,6 +2385,61 @@
                    console.log('绘制买卖点 - 已禁用');
                }
                
+                // 显示分型类型标签
+                if ($('#showKlcFxType').is(':checked') && currentData.klc_fx_info && currentData.klc_fx_info.length > 0) {
+                    console.log(`绘制K线分型类型标签，共${currentData.klc_fx_info.length}条`);
+                    
+                    currentData.klc_fx_info.forEach(function(fx) {
+                        try {
+                            // 直接使用UTC时间戳（秒）
+                            const timestamp = Math.floor(new Date(fx.time).getTime() / 1000);
+                            const price = parseFloat(fx.price);
+                            
+                            if (isNaN(timestamp) || isNaN(price)) {
+                                console.error('分型类型时间或价格转换错误:', fx.time, fx.price);
+                                return;
+                            }
+                            
+                            // 确定颜色和位置
+                            const color = fx.is_bottom ? '#28a745' : '#dc3545'; // 底分型绿色，顶分型红色
+                            
+                            // 创建标记系列
+                            const markerSeries = mainChart.addLineSeries({
+                                lastValueVisible: false,
+                                priceLineVisible: false,
+                            });
+                            
+                            // 设置文本标记
+                            markerSeries.setMarkers([
+                                {
+                                    time: timestamp,
+                                    position: fx.is_bottom ? 'belowBar' : 'aboveBar',
+                                    color: color,
+                                    shape: 'circle',
+                                    text: fx.fx_type,
+                                    size: 1
+                                }
+                            ]);
+                            
+                            // 可选：添加更加明显的文本标签
+                            const textSeries = mainChart.addLineSeries({
+                                lastValueVisible: false,
+                                priceLineVisible: false,
+                            });
+                            
+                            textSeries.setData([{ 
+                                time: timestamp, 
+                                value: price + (fx.is_bottom ? -0.0005 * price : 0.0005 * price) // 小偏移，避免遮挡
+                            }]);
+                            
+                        } catch (e) {
+                            console.error('绘制分型类型标签出错:', e);
+                        }
+                    });
+                } else {
+                    console.log('绘制分型类型标签 - 已禁用或无数据');
+                }
+                
                // 调整所有图表以适应数据
                mainChart.timeScale().fitContent();
                volumeChart.timeScale().fitContent();