YuWuKunCheng
491 lines
20 KiB
HTML
491 lines
20 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>静态股票图表 (离线版)</title>
|
||
<style>
|
||
html, body {
|
||
height: 100%;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
#chart-container, #tv-chart {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div id="chart-container">
|
||
<div id="tv-chart"></div>
|
||
<div class="loading-overlay" id="loading-overlay">
|
||
<div class="spinner"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
let isFrist = true;
|
||
let shapesDrawn = new Set();
|
||
const symbol = "{{ symbol }}";
|
||
const interval = "{{ interval }}";
|
||
const chan_config = {{ chan_config | tojson }};
|
||
const STATIC_DATA = {{ static_data | tojson }};
|
||
const STATIC_SHAPES = {{ static_shapes | tojson }};
|
||
|
||
function createShape(shape) {
|
||
const chart = window._tvWidget?.activeChart();
|
||
if (!chart) return;
|
||
const shapePoints = shape.points.map(p => ({time: p.time, price: p.price}));
|
||
const options = {
|
||
shape: shape.shapeType, lock: false, disableSelection: false,
|
||
disableSave: false, disableUndo: true, overrides: shape.overrides || {}, zOrder: 'top',
|
||
};
|
||
try {
|
||
const result = chart.createMultipointShape(shapePoints, options);
|
||
if (!result) return;
|
||
if (typeof result === 'object' && typeof result.then === 'function') {
|
||
result.then(id => console.log('图形创建成功, ID:', id));
|
||
} else {
|
||
console.log('图形创建成功, ID:', result);
|
||
}
|
||
} catch (e) {
|
||
console.warn('创建图形失败:', e);
|
||
}
|
||
}
|
||
|
||
function shapeReady(shape, latestTimeMs) {
|
||
if (!shape.points || shape.points.length === 0) return false;
|
||
const maxTimeSec = Math.max(...shape.points.map(p => p.time));
|
||
return maxTimeSec * 1000 <= latestTimeMs;
|
||
}
|
||
|
||
function drawShapesUpTo(latestTime) {
|
||
STATIC_SHAPES.forEach((shape, idx) => {
|
||
if (!shapesDrawn.has(idx) && shapeReady(shape, latestTime)) {
|
||
createShape(shape);
|
||
shapesDrawn.add(idx);
|
||
}
|
||
});
|
||
}
|
||
|
||
class StaticDatafeed {
|
||
constructor() {
|
||
this._subscribers = {};
|
||
this._allBars = STATIC_DATA.bars;
|
||
this._pushIndex = 0;
|
||
}
|
||
|
||
onReady(callback) {
|
||
setTimeout(() => callback({
|
||
supports_search: false, supports_group_request: false,
|
||
supports_marks: false, supports_timescale_marks: true,
|
||
supports_time: true, supported_resolutions: [interval],
|
||
}), 0);
|
||
}
|
||
|
||
resolveSymbol(symbolName, onResolve, onError) {
|
||
const sym = symbolName.toUpperCase();
|
||
const symbolInfo = {
|
||
exchange: "exchange", ticker: symbol, name: symbol,
|
||
description: symbol, type: "Unknown", session: "24x7",
|
||
timezone: "Asia/Shanghai", minmov: 1, pricescale: 100,
|
||
visible_plots_set: "ohlcv", has_no_volume: false,
|
||
has_weekly_and_monthly: false, supported_resolutions: [interval],
|
||
volume_precision: 1, has_intraday: true, has_daily: true,
|
||
monthly_multipliers: [], weekly_multipliers: [], format: "price",
|
||
};
|
||
setTimeout(() => onResolve(symbolInfo), 0);
|
||
}
|
||
|
||
searchSymbols(userInput, exchange, symbolType, onResult) {
|
||
}
|
||
|
||
getBars(symbolInfo, resolution, periodParams, onResult, onError) {
|
||
console.log("[Datafeed.getBars]", symbolInfo, resolution, periodParams);
|
||
if (isFrist) {
|
||
const initialCount = Math.min(10, this._allBars.length);
|
||
const bars = this._allBars.slice(0, initialCount).map(([t, o, h, l, c, v]) => ({
|
||
time: t * 1000, open: o, high: h, low: l, close: c, volume: v
|
||
}));
|
||
this._pushIndex = initialCount;
|
||
isFrist = false;
|
||
setTimeout(() => onResult(bars, {noData: false}), 0);
|
||
} else {
|
||
onResult([], {noData: true});
|
||
}
|
||
}
|
||
|
||
subscribeBars(symbolInfo, resolution, onTick, listenerGuid, onResetCacheNeededCallback) {
|
||
this.unsubscribeBars(listenerGuid);
|
||
const bars = this._allBars;
|
||
let idx = this._pushIndex;
|
||
if (idx > 0) {
|
||
const lastBar = bars[idx - 1]; // 最后一条已加载的K线
|
||
drawShapesUpTo(lastBar[0] * 1000); // 转为毫秒
|
||
}
|
||
const sub = {};
|
||
sub.timerId = setInterval(() => {
|
||
if (idx >= bars.length) {
|
||
clearInterval(sub.timerId);
|
||
return;
|
||
}
|
||
const [t, o, h, l, c, v] = bars[idx];
|
||
const bar = {time: t * 1000, open: o, high: h, low: l, close: c, volume: v};
|
||
onTick(bar);
|
||
drawShapesUpTo(bar.time);
|
||
idx++;
|
||
}, 20);
|
||
this._subscribers[listenerGuid] = sub;
|
||
}
|
||
|
||
unsubscribeBars(listenerGuid) {
|
||
const sub = this._subscribers[listenerGuid];
|
||
if (sub && sub.timerId) clearInterval(sub.timerId);
|
||
delete this._subscribers[listenerGuid];
|
||
}
|
||
|
||
getServerTime(callback) {
|
||
setTimeout(() => callback(Math.floor(Date.now() / 1000)), 0);
|
||
}
|
||
}
|
||
|
||
// 创建静态图形的函数
|
||
function createStaticShapes(chart) {
|
||
STATIC_SHAPES.forEach(shape => {
|
||
const shapePoints = shape.points.map(p => ({
|
||
time: p.time,
|
||
price: p.price
|
||
}));
|
||
const options = {
|
||
shape: shape.shapeType,
|
||
lock: false,
|
||
disableSelection: false,
|
||
disableSave: false,
|
||
disableUndo: true,
|
||
overrides: shape.overrides || {},
|
||
zOrder: 'top',
|
||
};
|
||
try {
|
||
const result = chart.createMultipointShape(shapePoints, options);
|
||
if (result === null) return;
|
||
if (typeof result === 'object' && typeof result.then === 'function') {
|
||
result.then(id => console.log('图形创建成功, ID:', id));
|
||
} else {
|
||
console.log('图形创建成功, ID:', result);
|
||
}
|
||
} catch (e) {
|
||
console.warn('创建图形失败:', e);
|
||
}
|
||
});
|
||
}
|
||
|
||
// ====================== 图形控制面板 ======================
|
||
function formatPeriod(seconds) {
|
||
const map = {
|
||
60: '1分钟', 180: '3分钟', 300: '5分钟', 900: '15分钟', 1800: '30分钟',
|
||
3600: '1小时', 7200: '2小时', 14400: '4小时', 21600: '6小时',
|
||
43200: '12小时', 86400: '日线', 259200: '3日线'
|
||
};
|
||
return map[seconds] || `${seconds}秒`;
|
||
}
|
||
|
||
function setShapesVisibleByPeriod(rawType, periodSeconds, visible) {
|
||
if (!window._tvWidget || !window._tvWidget.activeChart()) return;
|
||
const allShapes = window._tvWidget.activeChart().getAllShapes();
|
||
allShapes.forEach(({id}) => {
|
||
const shape = window._tvWidget.activeChart().getShapeById(id);
|
||
if (!shape) return;
|
||
const props = shape.getProperties();
|
||
const title = props.title || '';
|
||
const parts = title.split(':');
|
||
if (parts.length < 3) return;
|
||
const [, periodStr, typeFromTitle] = parts;
|
||
const periodFromTitle = Number(periodStr);
|
||
if (typeFromTitle === rawType && periodFromTitle === periodSeconds) {
|
||
shape.setProperties({visible});
|
||
}
|
||
});
|
||
}
|
||
|
||
function isPeriodVisible(rawType, periodSeconds) {
|
||
if (!window._tvWidget || !window._tvWidget.activeChart()) return true;
|
||
const allShapes = window._tvWidget.activeChart().getAllShapes();
|
||
let hasAny = false;
|
||
for (const {id} of allShapes) {
|
||
const shape = window._tvWidget.activeChart().getShapeById(id);
|
||
if (!shape) continue;
|
||
const props = shape.getProperties();
|
||
const title = props.title || '';
|
||
const parts = title.split(':');
|
||
if (parts.length < 3) continue;
|
||
const [, periodStr, typeFromTitle] = parts;
|
||
const periodFromTitle = Number(periodStr);
|
||
if (typeFromTitle === rawType && periodFromTitle === periodSeconds) {
|
||
hasAny = true;
|
||
if (props.visible === false) return false;
|
||
}
|
||
}
|
||
return hasAny;
|
||
}
|
||
|
||
function setupCustomDropdown(triggerElement, widget) {
|
||
const panel = document.createElement('div');
|
||
panel.style.cssText = `
|
||
position: absolute; z-index: 10000;
|
||
background: ${widget.getTheme() === 'dark' ? '#1e2532' : '#ffffff'};
|
||
border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,0.3);
|
||
padding: 8px 0; min-width: 240px; max-height: 70vh; overflow-y: auto;
|
||
border: 1px solid ${widget.getTheme() === 'dark' ? '#3a4a6a' : '#d1d4dc'};
|
||
color: ${widget.getTheme() === 'dark' ? '#d1d9e6' : '#131722'};
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Trebuchet MS', Roboto, sans-serif;
|
||
display: none;
|
||
backdrop-filter: blur(4px);
|
||
`;
|
||
document.body.appendChild(panel);
|
||
|
||
const refreshMenu = () => {
|
||
panel.innerHTML = '';
|
||
if (!window._tvWidget || !window._tvWidget.activeChart()) return;
|
||
const allShapes = window._tvWidget.activeChart().getAllShapes();
|
||
|
||
const typePeriods = {}; // { rawType -> Set of periods }
|
||
|
||
allShapes.forEach(({id}) => {
|
||
const shape = window._tvWidget.activeChart().getShapeById(id);
|
||
if (!shape) return;
|
||
const props = shape.getProperties();
|
||
const title = props.title || '';
|
||
const parts = title.split(':');
|
||
if (parts.length < 3) return;
|
||
const period = Number(parts[1]);
|
||
const rawType = parts[2]; // 直接使用第三段
|
||
if (!typePeriods[rawType]) typePeriods[rawType] = new Set();
|
||
typePeriods[rawType].add(period);
|
||
});
|
||
|
||
if (Object.keys(typePeriods).length === 0) {
|
||
const empty = document.createElement('div');
|
||
empty.textContent = '暂无图形数据';
|
||
empty.style.padding = '12px 16px';
|
||
empty.style.opacity = '0.7';
|
||
panel.appendChild(empty);
|
||
return;
|
||
}
|
||
|
||
// 为每个基础类型创建折叠组
|
||
Object.keys(typePeriods).sort().forEach(baseType => {
|
||
const section = document.createElement('div');
|
||
const header = document.createElement('div');
|
||
header.style.cssText = `
|
||
padding: 10px 16px; cursor: pointer; display: flex; align-items: center;
|
||
justify-content: space-between; user-select: none;
|
||
background: ${widget.getTheme() === 'dark' ? 'rgba(255,255,255,0.03)' : 'rgba(0,0,0,0.02)'};
|
||
border-bottom: 1px solid rgba(128,128,128,0.2);
|
||
`;
|
||
header.innerHTML = `<span style="font-weight:600;">${baseType}</span><span class="toggle-arrow" style="transition: transform 0.2s;">▼</span>`;
|
||
const content = document.createElement('div');
|
||
content.style.display = 'block';
|
||
|
||
header.addEventListener('click', () => {
|
||
const arrow = header.querySelector('.toggle-arrow');
|
||
if (content.style.display === 'none') {
|
||
content.style.display = 'block';
|
||
arrow.style.transform = 'rotate(0deg)';
|
||
} else {
|
||
content.style.display = 'none';
|
||
arrow.style.transform = 'rotate(-90deg)';
|
||
}
|
||
});
|
||
|
||
const periods = Array.from(typePeriods[baseType]).sort((a, b) => a - b);
|
||
periods.forEach(period => {
|
||
const row = document.createElement('div');
|
||
row.style.cssText = `
|
||
padding: 6px 16px 6px 28px; display: flex; align-items: center;
|
||
cursor: pointer; transition: background 0.15s;
|
||
`;
|
||
row.addEventListener('mouseenter', () => row.style.background = widget.getTheme() === 'dark' ? '#2a374b' : '#f0f3fa');
|
||
row.addEventListener('mouseleave', () => row.style.background = 'transparent');
|
||
|
||
const checkbox = document.createElement('input');
|
||
checkbox.type = 'checkbox';
|
||
checkbox.checked = isPeriodVisible(baseType, period);
|
||
checkbox.style.cssText = `
|
||
margin-right: 12px; accent-color: #2962ff;
|
||
width: 16px; height: 16px; cursor: pointer;
|
||
`;
|
||
|
||
const label = document.createElement('span');
|
||
label.textContent = formatPeriod(period);
|
||
label.style.flex = '1';
|
||
|
||
row.appendChild(checkbox);
|
||
row.appendChild(label);
|
||
|
||
row.addEventListener('click', (e) => {
|
||
if (e.target !== checkbox) {
|
||
checkbox.checked = !checkbox.checked;
|
||
}
|
||
setShapesVisibleByPeriod(baseType, period, checkbox.checked);
|
||
});
|
||
|
||
content.appendChild(row);
|
||
});
|
||
|
||
section.appendChild(header);
|
||
section.appendChild(content);
|
||
panel.appendChild(section);
|
||
});
|
||
|
||
// 底部全局控制按钮
|
||
const footer = document.createElement('div');
|
||
footer.style.cssText = `
|
||
border-top: 1px solid ${widget.getTheme() === 'dark' ? '#3a4a6a' : '#d1d4dc'};
|
||
padding: 8px 16px; display: flex; gap: 8px;
|
||
`;
|
||
const showAllBtn = document.createElement('button');
|
||
showAllBtn.textContent = '全部显示';
|
||
showAllBtn.style.cssText = `flex:1; padding: 4px; background: #2563eb; color:white; border:none; border-radius: 4px; cursor:pointer;`;
|
||
showAllBtn.addEventListener('click', () => {
|
||
Object.keys(typePeriods).forEach(baseType => {
|
||
typePeriods[baseType].forEach(period => {
|
||
setShapesVisibleByPeriod(baseType, period, true);
|
||
});
|
||
});
|
||
refreshMenu();
|
||
});
|
||
const hideAllBtn = document.createElement('button');
|
||
hideAllBtn.textContent = '全部隐藏';
|
||
hideAllBtn.style.cssText = `flex:1; padding: 4px; background: #ef4444; color:white; border:none; border-radius: 4px; cursor:pointer;`;
|
||
hideAllBtn.addEventListener('click', () => {
|
||
Object.keys(typePeriods).forEach(baseType => {
|
||
typePeriods[baseType].forEach(period => {
|
||
setShapesVisibleByPeriod(baseType, period, false);
|
||
});
|
||
});
|
||
refreshMenu();
|
||
});
|
||
footer.appendChild(showAllBtn);
|
||
footer.appendChild(hideAllBtn);
|
||
panel.appendChild(footer);
|
||
};
|
||
|
||
const showPanel = () => {
|
||
refreshMenu();
|
||
panel.style.display = 'block';
|
||
const rect = triggerElement.getBoundingClientRect();
|
||
// 等待 layout 完成以获取正确的 panel 宽度
|
||
requestAnimationFrame(() => {
|
||
const panelWidth = panel.offsetWidth;
|
||
let left = rect.right - panelWidth;
|
||
if (left < 0) left = 5;
|
||
panel.style.top = `${rect.bottom + 4}px`;
|
||
panel.style.left = `${left}px`;
|
||
});
|
||
};
|
||
const hidePanel = () => {
|
||
panel.style.display = 'none';
|
||
};
|
||
|
||
triggerElement.addEventListener('click', (e) => {
|
||
e.stopPropagation();
|
||
panel.style.display === 'block' ? hidePanel() : showPanel();
|
||
});
|
||
document.addEventListener('click', (e) => {
|
||
if (!panel.contains(e.target) && e.target !== triggerElement) hidePanel();
|
||
});
|
||
window.addEventListener('resize', () => {
|
||
if (panel.style.display === 'block') showPanel();
|
||
});
|
||
|
||
// 保存引用以便外部强制刷新
|
||
this.refreshDropdown = refreshMenu;
|
||
}
|
||
|
||
function createButton() {
|
||
// 创建自定义按钮（注意：useTradingViewStyle 省略或设为 false）
|
||
const customBtn = window._tvWidget.createButton({
|
||
align: 'right' // 可选 'left' 或 'right'
|
||
});
|
||
|
||
// 设置按钮内容与样式
|
||
customBtn.innerHTML = `⚙️ 图表工具`;
|
||
customBtn.style.cssText = `
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
height: 32px;
|
||
padding: 0 12px;
|
||
margin: 0 4px;
|
||
border-radius: 4px;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
color: ${window._tvWidget.getTheme() === 'dark' ? '#d1d4dc' : '#131722'};
|
||
background: transparent;
|
||
border: none;
|
||
cursor: pointer;
|
||
transition: background 0.2s, color 0.2s;
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Trebuchet MS', Roboto, Ubuntu, sans-serif;
|
||
user-select: none;
|
||
`;
|
||
|
||
customBtn.addEventListener('mouseenter', () => {
|
||
customBtn.style.background = window._tvWidget.getTheme() === 'dark'
|
||
? 'rgba(255, 255, 255, 0.08)'
|
||
: 'rgba(0, 0, 0, 0.05)';
|
||
});
|
||
customBtn.addEventListener('mouseleave', () => {
|
||
customBtn.style.background = 'transparent';
|
||
});
|
||
|
||
// 现在你可以安全地使用 customBtn 作为触发器
|
||
this.setupCustomDropdown(customBtn, window._tvWidget);
|
||
}
|
||
|
||
function initChart() {
|
||
if (typeof TradingView === 'undefined') {
|
||
document.getElementById('tv-chart').innerHTML = '<div style="display:flex;align-items:center;justify-content:center;height:100%;color:#888;">请将 charting_library 放在同级目录</div>';
|
||
document.getElementById('loading-overlay').classList.add('hidden');
|
||
return;
|
||
}
|
||
|
||
const widget = new TradingView.widget({
|
||
container: 'tv-chart', library_path: 'charting_library/', locale: 'zh',
|
||
datafeed: new StaticDatafeed(), symbol, interval,
|
||
favorites: {drawingTools: ["LineToolPath", "LineToolRectangle", "LineToolTrendLine"]},
|
||
disabled_features: [
|
||
"use_localstorage_for_settings", "header_symbol_search",
|
||
"header_undo_redo", "header_screenshot", "header_compare",
|
||
"header_chart_type", "go_to_date",
|
||
],
|
||
theme: "light",
|
||
fullscreen: false, autosize: true,
|
||
//toolbar_bg: '#2a2a3e',
|
||
overrides: {
|
||
//'paneProperties.background': '#1e1e2e',
|
||
//'mainSeriesProperties.candleStyle.upColor': '#00c853',
|
||
//'mainSeriesProperties.candleStyle.downColor': '#ff1744',
|
||
}
|
||
});
|
||
window._tvWidget = widget;
|
||
|
||
widget.onChartReady(() => {
|
||
document.getElementById('loading-overlay').classList.add('hidden');
|
||
console.log('✅ 开始实时回放');
|
||
});
|
||
|
||
widget.headerReady().then(() => {
|
||
widget.activeChart().createStudy("MACD", false, false, {
|
||
in_0: 13, in_1: 31, in_2: 11, in_3: "close"
|
||
});
|
||
createButton();
|
||
});
|
||
}
|
||
|
||
window.addEventListener('DOMContentLoaded', initChart);
|
||
</script>
|
||
<script src="charting_library/charting_library.js"></script>
|
||
</body>
|
||
</html> |