jack/Chan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

主图增加笔/线段背驰与面积数字，并修正 SD99999 显示。

Browse Source 
三周期分开关控制，只画数字不画图标；线段面积比沿用同向笔面积口径。

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
jackyu66git
2026-09-10 04:33:40 +08:00
co-authored by Cursor
parent 6b72ba226b
commit 2cd50f1e01
11 changed files with 378 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/static/js/app/chart_tv_chan.js
-64
View File
@@ -178,38 +178,6 @@ function chartTvRenderChan(ctx) {
color: bi.direction === 1 ? '#dc3545' : '#28a745',
lineWidth: 1
});
// 在笔的末端添加macd_div值标记
if (bi.macd_div && bi.macd_div !== 0 && $('#showMainMacdDiv').is(':checked')) {
console.log(`添加主周期macd_div标记: ${bi.macd_div.toFixed(2)}, 在时间点: ${endTime}`);
const macdDivLabel = mainChart.addLineSeries({
lastValueVisible: false,
priceLineVisible: false,
color: 'transparent', // 设置为透明色
lineWidth: 0, // 线宽为0
});
// 添加一个透明的数据点用于承载标记
macdDivLabel.setData([
{ time: endTime, value: endPrice }
]);
// 主周期MACD背离标记根据笔方向显示，远离K线避免与分型重叠
const markerPosition = bi.direction === 1 ? 'aboveBar' : 'belowBar';
const textColor = bi.macd_div > 0 ? '#dc3545' : '#28a745';
// 只使用标记，不添加数据点
macdDivLabel.setMarkers([
{
time: endTime,
position: markerPosition,
color: textColor,
text: `${bi.macd_div.toFixed(2)}`, // 添加M前缀区分
size: 0.6, // 更小的尺寸，远离分型标记
}
]);
}
} catch (e) {
console.error('主周期笔处理出错:', e);
}
@@ -260,38 +228,6 @@ function chartTvRenderChan(ctx) {
color: bi.direction === 1 ? '#9c27b0' : '#673ab7',
lineWidth: 1
});
// 在笔的末端添加macd_div值标记
if (bi.macd_div && bi.macd_div !== 0 && $('#showElementMacdDiv').is(':checked')) {
console.log(`添加元素周期macd_div标记: ${bi.macd_div.toFixed(2)}, 在时间点: ${endTime}`);
const macdDivLabel = mainChart.addLineSeries({
lastValueVisible: false,
priceLineVisible: false,
color: 'transparent', // 设置为透明色
lineWidth: 0, // 线宽为0
});
// 添加一个透明的数据点用于承载标记
macdDivLabel.setData([
{ time: endTime, value: endPrice }
]);
// 次周期MACD背离标记使用不同位置，进一步避免重叠
const markerPosition = bi.direction === 1 ? 'aboveBar' : 'belowBar';
const textColor = bi.macd_div > 0 ? '#9c27b0' : '#673ab7';
// 只使用标记，不添加数据点
macdDivLabel.setMarkers([
{
time: endTime,
position: markerPosition,
color: textColor,
text: `${bi.macd_div.toFixed(2)}`, // 添加E前缀区分次周期
size: 0.4, // 更小的尺寸，让分型标记有更多空间
}
]);
}
} catch (e) {
console.error('次周期笔处理出错:', e);
}
web/static/js/app/chart_tv_indicators.js
+18 -10
View File
@@ -1,5 +1,10 @@
/* chart_tv_indicators.js — volume / ATR / ChanMACD */
function formatSdMarkerText(separateDiv) {
const n = Number(separateDiv);
return `SD${n === 99999 ? 0 : n}`;
}
function chartTvRenderIndicators(ctx) {
var symbol = ctx.symbol;
var timeframe = ctx.timeframe;
@@ -141,11 +146,11 @@ function chartTvRenderIndicators(ctx) {
// 使用与K线数据相同的数据源来确保时间对齐
const klineDataSource = useSubSubPeriod ? (currentData.sub_sub_kline_data || []) : (useElementPeriod ? currentData.element_kline_data : currentData.kline_data);
const macdDataSource = useElementPeriod ?
(currentData.element_macd || currentData.macd) : // 如果有次周期MACD数据则使用，否则使用主周期
currentData.macd; // 主周期使用主周期MACD数据
const macdDataSource = useSubSubPeriod
? (currentData.sub_sub_macd || currentData.macd)
: (useElementPeriod ? (currentData.element_macd || currentData.macd) : currentData.macd);
console.log('MACD数据源选择:', useElementPeriod ? '次周期' : '主周期');
console.log('MACD数据源选择:', useSubSubPeriod ? '次次周期' : (useElementPeriod ? '次周期' : '主周期'));
console.log('K线数据长度:', klineDataSource.length);
console.log('MACD数据:', macdDataSource);
@@ -390,7 +395,7 @@ function chartTvRenderIndicators(ctx) {
if (Number(item.separate_div) > 0) {
const macdVal = mainMacdMap.get(ts);
const posSd = (macdVal > 0) ? 'aboveBar' : (macdVal < 0) ? 'belowBar' : 'aboveBar';
mainMarkers.push({ time: ts, position: posSd, color: '#03a9f4', shape: 'arrowUp', text: `SD${Number(item.separate_div)}`, size: 0.6 });
mainMarkers.push({ time: ts, position: posSd, color: '#03a9f4', shape: 'arrowUp', text: formatSdMarkerText(item.separate_div), size: 0.6 });
}
if (item.continue_div === true) {
const macdVal = mainMacdMap.get(ts);
@@ -412,7 +417,7 @@ function chartTvRenderIndicators(ctx) {
if (Number(item.separate_div) > 0) {
const macdVal = elementMacdMap.get(ts);
const posSd = (macdVal > 0) ? 'aboveBar' : (macdVal < 0) ? 'belowBar' : 'aboveBar';
elementMarkers.push({ time: ts, position: posSd, color: '#9c27b0', shape: 'arrowUp', text: `SD${Number(item.separate_div)}`, size: 0.6 });
elementMarkers.push({ time: ts, position: posSd, color: '#9c27b0', shape: 'arrowUp', text: formatSdMarkerText(item.separate_div), size: 0.6 });
}
if (item.continue_div === true) {
const macdVal = elementMacdMap.get(ts);
@@ -436,7 +441,7 @@ function chartTvRenderIndicators(ctx) {
if (Number(item.separate_div) > 0) {
const macdVal = subSubMacdMap.get(ts);
const posSd = (macdVal > 0) ? 'aboveBar' : (macdVal < 0) ? 'belowBar' : 'aboveBar';
subSubMarkers.push({ time: ts, position: posSd, color: '#00897b', shape: 'arrowUp', text: `SD${Number(item.separate_div)}`, size: 0.6 });
subSubMarkers.push({ time: ts, position: posSd, color: '#00897b', shape: 'arrowUp', text: formatSdMarkerText(item.separate_div), size: 0.6 });
}
if (item.continue_div === true) {
const macdVal = subSubMacdMap.get(ts);
@@ -502,7 +507,7 @@ function chartTvRenderIndicators(ctx) {
if (Number(item.separate_div) > 0) {
const macdVal = mainMacdMapAll.get(ts);
const posSd = (macdVal > 0) ? 'aboveBar' : (macdVal < 0) ? 'belowBar' : 'aboveBar';
mainMarkersAll.push({ time: ts, position: posSd, color: '#03a9f4', shape: 'arrowUp', text: `SD${Number(item.separate_div)}`, size: 0.6 });
mainMarkersAll.push({ time: ts, position: posSd, color: '#03a9f4', shape: 'arrowUp', text: formatSdMarkerText(item.separate_div), size: 0.6 });
}
if (item.continue_div === true) {
const macdVal = mainMacdMapAll.get(ts);
@@ -522,7 +527,7 @@ function chartTvRenderIndicators(ctx) {
if (Number(item.separate_div) > 0) {
const macdVal = elementMacdMapAll.get(ts);
const posSd = (macdVal > 0) ? 'aboveBar' : (macdVal < 0) ? 'belowBar' : 'aboveBar';
elementMarkersAll.push({ time: ts, position: posSd, color: '#9c27b0', shape: 'arrowUp', text: `SD${Number(item.separate_div)}`, size: 0.6 });
elementMarkersAll.push({ time: ts, position: posSd, color: '#9c27b0', shape: 'arrowUp', text: formatSdMarkerText(item.separate_div), size: 0.6 });
}
if (item.continue_div === true) {
const macdVal = elementMacdMapAll.get(ts);
@@ -544,7 +549,7 @@ function chartTvRenderIndicators(ctx) {
const ts = Math.floor(new Date(item.time).getTime() / 1000);
if (isNaN(ts)) return;
if (Number(item.separate_div) > 0) {
subSubMarkersAll.push({ time: ts, position: 'aboveBar', color: '#00897b', shape: 'arrowUp', text: `SD${Number(item.separate_div)}`, size: 0.6 });
subSubMarkersAll.push({ time: ts, position: 'aboveBar', color: '#00897b', shape: 'arrowUp', text: formatSdMarkerText(item.separate_div), size: 0.6 });
}
if (item.continue_div === true) {
subSubMarkersAll.push({ time: ts, position: 'belowBar', color: '#26a69a', shape: 'arrowDown', text: 'CD', size: 0.6 });
@@ -555,6 +560,9 @@ function chartTvRenderIndicators(ctx) {
});
}
window.kluDivMarkersSubSub = subSubMarkersAll;
if (typeof refreshUnittfOverlayFromData === 'function') {
refreshUnittfOverlayFromData(currentData);
}
} catch (e) {
console.warn('独立计算 KLU 背驰标记出错:', e);
window.kluDivMarkersMain = [];
web/static/js/app/chart_tv_overlays.js
+216 -16
View File
@@ -82,6 +82,169 @@ var SUB_SUB_KLC_TREND_STYLE = {
UNKNOWN: { position: 'inBar', color: '#004d40', shape: 'square', size: 0.5 }
};
function parseAreaDivValue(v) {
var n = Number(v);
return (isFinite(n) && n !== 0) ? n : 0;
}
function pushAreaTextLabel(out, item, style, text) {
if (!item || !item.end_time || !text) return;
var ts = Math.floor(new Date(item.end_time).getTime() / 1000);
if (isNaN(ts)) return;
var price = Number(item.end_price);
if (!isFinite(price)) price = Number(item.start_price);
if (!isFinite(price)) return;
var up = Number(item.direction) === 1;
out.push({
time: ts,
price: price,
text: text,
color: style.color,
above: up
});
}
function pushAreaDivMarker(out, item, style) {
var div = parseAreaDivValue(item && item.macd_div);
if (!div) return;
pushAreaTextLabel(out, item, style, div.toFixed(2));
}
function collectAreaDivMarkers(biList, uncompletedBi, segList, uncompletedSeg, biStyle, segStyle, showBi, showSeg) {
var out = [];
if (showBi) {
(biList || []).forEach(function (bi) { pushAreaDivMarker(out, bi, biStyle); });
(uncompletedBi || []).forEach(function (bi) { pushAreaDivMarker(out, bi, biStyle); });
}
if (showSeg) {
(segList || []).forEach(function (seg) { pushAreaDivMarker(out, seg, segStyle); });
(uncompletedSeg || []).forEach(function (seg) { pushAreaDivMarker(out, seg, segStyle); });
}
return out;
}
function formatMacdAreaText(v) {
var n = Number(v);
if (!isFinite(n) || n === 0) return '';
var abs = Math.abs(n);
if (abs >= 100) return n.toFixed(0);
if (abs >= 10) return n.toFixed(1);
return n.toFixed(2);
}
function pushAreaHistMarker(out, item, style) {
pushAreaTextLabel(out, item, style, formatMacdAreaText(item && item.macd_hist));
}
function collectAreaHistMarkers(biList, uncompletedBi, segList, uncompletedSeg, biStyle, segStyle, showBi, showSeg) {
var out = [];
if (showBi) {
(biList || []).forEach(function (bi) { pushAreaHistMarker(out, bi, biStyle); });
(uncompletedBi || []).forEach(function (bi) { pushAreaHistMarker(out, bi, biStyle); });
}
if (showSeg) {
(segList || []).forEach(function (seg) { pushAreaHistMarker(out, seg, segStyle); });
(uncompletedSeg || []).forEach(function (seg) { pushAreaHistMarker(out, seg, segStyle); });
}
return out;
}
function buildAreaHistMarkersFromData(data) {
var markers = [];
if (!data) return markers;
var showMainBi = $('#showMainBiArea').is(':checked');
var showMainSeg = $('#showMainSegArea').is(':checked');
if (showMainBi || showMainSeg) {
markers = markers.concat(collectAreaHistMarkers(
data.bi_list,
data.uncompleted_bi_list,
data.seg_list,
data.uncompleted_seg_list,
{ color: '#1565c0', size: 0.55 },
{ color: '#00838f', size: 0.65 },
showMainBi,
showMainSeg
));
}
var showElementBi = $('#showElementBiArea').is(':checked');
var showElementSeg = $('#showElementSegArea').is(':checked');
if (showElementBi || showElementSeg) {
markers = markers.concat(collectAreaHistMarkers(
data.element_bi_list,
data.element_uncompleted_bi_list,
data.element_seg_list,
data.element_uncompleted_seg_list,
{ color: '#3949ab', size: 0.5 },
{ color: '#5c6bc0', size: 0.6 },
showElementBi,
showElementSeg
));
}
var showSubSubBi = $('#showSubSubBiArea').is(':checked');
var showSubSubSeg = $('#showSubSubSegArea').is(':checked');
if (showSubSubBi || showSubSubSeg) {
markers = markers.concat(collectAreaHistMarkers(
data.sub_sub_bi_list,
data.sub_sub_uncompleted_bi_list,
data.sub_sub_seg_list,
data.sub_sub_uncompleted_seg_list,
{ color: '#2e7d32', size: 0.45 },
{ color: '#558b2f', size: 0.55 },
showSubSubBi,
showSubSubSeg
));
}
return markers;
}
function buildAreaDivMarkersFromData(data) {
var markers = [];
if (!data) return markers;
var showMainBi = $('#showMainMacdDiv').is(':checked');
var showMainSeg = $('#showMainSegMacdDiv').is(':checked');
if (showMainBi || showMainSeg) {
markers = markers.concat(collectAreaDivMarkers(
data.bi_list,
data.uncompleted_bi_list,
data.seg_list,
data.uncompleted_seg_list,
{ color: '#e53935', size: 0.6 },
{ color: '#fb8c00', size: 0.7 },
showMainBi,
showMainSeg
));
}
var showElementBi = $('#showElementMacdDiv').is(':checked');
var showElementSeg = $('#showElementSegMacdDiv').is(':checked');
if (showElementBi || showElementSeg) {
markers = markers.concat(collectAreaDivMarkers(
data.element_bi_list,
data.element_uncompleted_bi_list,
data.element_seg_list,
data.element_uncompleted_seg_list,
{ color: '#8e24aa', size: 0.55 },
{ color: '#5e35b1', size: 0.65 },
showElementBi,
showElementSeg
));
}
var showSubSubBi = $('#showSubSubMacdDiv').is(':checked');
var showSubSubSeg = $('#showSubSubSegMacdDiv').is(':checked');
if (showSubSubBi || showSubSubSeg) {
markers = markers.concat(collectAreaDivMarkers(
data.sub_sub_bi_list,
data.sub_sub_uncompleted_bi_list,
data.sub_sub_seg_list,
data.sub_sub_uncompleted_seg_list,
{ color: '#00897b', size: 0.5 },
{ color: '#00695c', size: 0.6 },
showSubSubBi,
showSubSubSeg
));
}
return markers;
}
function buildKlcTrendMarker(timeAligned, trendRaw, palette) {
var kind = normalizeKlcTrendRaw(trendRaw);
var style = palette[kind] || palette.UNKNOWN || palette.FLAT;
@@ -163,23 +326,38 @@ function syncFxBoxVerticalOverlay(mainChart, mainChartContainer) {
// LWC 4 无 priceScale 订阅：采样坐标变化（含增量 setData 后自动缩放）
var sampleSig = function () {
var boxes = window._fxBoxVerticals || [];
var labels = window._areaTextLabels || [];
var series = getMainPriceSeries();
if (!series || !boxes.length) return '0';
if (!series || (!boxes.length && !labels.length)) return '0';
var ts = mainChart.timeScale();
var a = boxes[0];
var b = boxes[boxes.length - 1];
return [
boxes.length,
quant(ts.timeToCoordinate(a.time)),
quant(series.priceToCoordinate(a.hi)),
quant(series.priceToCoordinate(a.lo)),
quant(ts.timeToCoordinate(b.time)),
quant(series.priceToCoordinate(b.hi)),
quant(series.priceToCoordinate(b.lo))
].join('|');
var parts = [boxes.length, labels.length];
if (boxes.length) {
var a = boxes[0];
var b = boxes[boxes.length - 1];
parts.push(
quant(ts.timeToCoordinate(a.time)),
quant(series.priceToCoordinate(a.hi)),
quant(series.priceToCoordinate(a.lo)),
quant(ts.timeToCoordinate(b.time)),
quant(series.priceToCoordinate(b.hi)),
quant(series.priceToCoordinate(b.lo))
);
}
if (labels.length) {
var la = labels[0];
var lb = labels[labels.length - 1];
parts.push(
quant(ts.timeToCoordinate(la.time)),
quant(series.priceToCoordinate(la.price)),
quant(ts.timeToCoordinate(lb.time)),
quant(series.priceToCoordinate(lb.price))
);
}
return parts.join('|');
};
var redraw = function () {
var boxes = window._fxBoxVerticals || [];
var labels = window._areaTextLabels || [];
var series = getMainPriceSeries();
var rect = mainChartContainer.getBoundingClientRect();
var dpr = window.devicePixelRatio || 1;
@@ -191,7 +369,7 @@ function syncFxBoxVerticalOverlay(mainChart, mainChartContainer) {
if (!ctx2) return;
ctx2.setTransform(dpr, 0, 0, dpr, 0, 0);
ctx2.clearRect(0, 0, rect.width, rect.height);
if (!series || !boxes.length) {
if (!series || (!boxes.length && !labels.length)) {
lastSig = sampleSig();
return;
}
@@ -211,6 +389,19 @@ function syncFxBoxVerticalOverlay(mainChart, mainChartContainer) {
ctx2.stroke();
}
ctx2.setLineDash([]);
if (labels.length) {
ctx2.font = '11px sans-serif';
ctx2.textAlign = 'center';
for (var li = 0; li < labels.length; li++) {
var lab = labels[li];
var lx = ts.timeToCoordinate(lab.time);
var ly = series.priceToCoordinate(lab.price);
if (lx == null || ly == null) continue;
ctx2.fillStyle = lab.color;
ctx2.textBaseline = lab.above ? 'bottom' : 'top';
ctx2.fillText(lab.text, Math.round(lx), lab.above ? ly - 3 : ly + 3);
}
}
lastSig = sampleSig();
};
var scheduleRedraw = function () {
@@ -257,6 +448,7 @@ function syncFxBoxVerticalOverlay(mainChart, mainChartContainer) {
function chartTvRenderOverlays(ctx) {
window._fxBoxVerticals = [];
window._areaTextLabels = [];
var symbol = ctx.symbol;
var timeframe = ctx.timeframe;
var symbolConfig = ctx.symbolConfig;
@@ -1852,6 +2044,14 @@ function chartTvRenderOverlays(ctx) {
window.mainFxMarkers = [];
window.fxMarkers = [];
}
window._areaTextLabels = alignMarkersToCandles(
buildAreaDivMarkersFromData(currentData).concat(buildAreaHistMarkersFromData(currentData)),
candles
);
if (typeof window._redrawFxBoxVerticalOverlay === 'function') {
window._redrawFxBoxVerticalOverlay();
}
// 绘制小周期分型标记（含次次周期）
if (($('#showElementKlcFxType').is(':checked') && currentData.element_klc_fx_info && currentData.element_klc_fx_info.length > 0) ||
($('#showElementKluFxType').is(':checked') && currentData.element_klu_fx_info && currentData.element_klu_fx_info.length > 0) ||
@@ -2157,7 +2357,7 @@ function chartTvRenderOverlays(ctx) {
trendMarkersToUse = trendMarkersToUse.concat(subSubMarkers);
}
// 合并标记并设置
// 合并标记并设置（主图不画 U/穿零轴，只留背驰 SD/CD）
const combinedMarkers = [
...(window.mainFxMarkers || []),
...allElementFxMarkers,
@@ -2173,7 +2373,7 @@ function chartTvRenderOverlays(ctx) {
'合并设置', combinedMarkers.length, '个标记（主周期分型:',
(window.mainFxMarkers || []).length,
'个，小周期分型:', allElementFxMarkers.length,
'个，UnitTF:', (window.unittfMarkers || []).length,
'个，背驰:', (window.kluDivMarkersMain || []).length,
'个，BSP标记:', (window.bspMarkers || []).length,
'个，第四类标记:', (window.fastBspMarkers || []).length,
'个）'
@@ -2288,7 +2488,7 @@ function chartTvRenderOverlays(ctx) {
...(window.fastBspMarkers || [])
];
if (onlyMainAndU.length > 0) {
console.log('仅设置', onlyMainAndU.length, '个主周期/UnitTF标记（主周期分型:', (window.mainFxMarkers || []).length, '，UnitTF:', (window.unittfMarkers || []).length, '）');
console.log('仅设置', onlyMainAndU.length, '个主图标记（主周期分型:', (window.mainFxMarkers || []).length, '，背驰:', (window.kluDivMarkersMain || []).length, '）');
// 根据当前主系列类型设置标记
const klineType2 = ($('#klineType').val() || (showOriginalKline ? 'candlestick' : 'line'));
web/static/js/app/ui.js
+3 -8
View File
@@ -597,14 +597,9 @@ function refreshChartOnly() {
}
}
// 绑定主周期MACD背离显示开关
$('#showMainMacdDiv').change(function() {
refreshChartOnly();
});
// 绑定次周期MACD背离显示开关
$('#showElementMacdDiv').change(function() {
refreshChartOnly();
// 绑定主/次/次次周期笔背驰、线段背驰、笔面积、线段面积显示开关
$('#showMainMacdDiv, #showMainSegMacdDiv, #showElementMacdDiv, #showElementSegMacdDiv, #showSubSubMacdDiv, #showSubSubSegMacdDiv, #showMainBiArea, #showMainSegArea, #showElementBiArea, #showElementSegArea, #showSubSubBiArea, #showSubSubSegArea').change(function() {
updateChartDisplay();
});
// 绑定分型类型显示开关（与笔一致：全量重建，避免增量路径标记未对齐）