├── screenshot01.png
├── screenshot02.png
├── screenshot03.png
├── LICENSE
├── README.md
├── index.html
├── screenshot-match.html
├── stocks-grid.html
├── fixed-bar-example.html
├── real-time-demo.html
└── fenshi.js


/screenshot01.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/reference/FenshiChart/main/screenshot01.png


--------------------------------------------------------------------------------
/screenshot02.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/reference/FenshiChart/main/screenshot02.png


--------------------------------------------------------------------------------
/screenshot03.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/reference/FenshiChart/main/screenshot03.png


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2025 Ban
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # FenshiChart - 实时分时图表库
  2 | 
  3 | FenshiChart 是一个轻量级的 JavaScript 图表库，专为显示股票、加密货币等金融产品的实时行情数据而设计。它支持秒级别更新，提供流畅的数据可视化体验，适合构建专业的交易和金融数据分析应用。
  4 | 
  5 | ![FenshiChart Demo](screenshot01.png)
  6 | ![FenshiChart Demo](screenshot02.png)
  7 | ![FenshiChart Demo](screenshot03.png)
  8 | ## 特点
  9 | 
 10 | - 实时渲染，支持秒级数据更新
 11 | - 显示价格走势线和成交量柱状图
 12 | - 支持均价线显示（基于成交量加权平均）
 13 | - 专为黑暗主题设计，易于阅读
 14 | - 自动适应容器大小，支持响应式布局
 15 | - 轻量级，无第三方依赖
 16 | - 可定制的颜色、线条和显示选项
 17 | - 中国A股风格：采用同花顺配色方案（涨为红色、跌为绿色）
 18 | - 高级横向滚动：支持鼠标拖拽、触摸滑动和滚轮操作
 19 | - 精确十字线：显示虚线十字线和数据点高亮
 20 | - 数据提示框：鼠标悬停时显示详细数据信息
 21 | - 右侧价格标签：显示涨跌幅数据
 22 | - 移动端优化：自动适配移动设备体验
 23 | 
 24 | ## 快速开始
 25 | 
 26 | ### 基本用法
 27 | 
 28 | 1. 在你的项目中引入 `fenshi.js`：
 29 | 
 30 | ```html
 31 | <script src="fenshi.js"></script>
 32 | ```
 33 | 
 34 | 2. 创建一个用于图表的容器：
 35 | 
 36 | ```html
 37 | <div id="chart-container" style="width: 100%; height: 400px;"></div>
 38 | ```
 39 | 
 40 | 3. 初始化图表并添加数据：
 41 | 
 42 | ```javascript
 43 | // 初始化图表
 44 | const chart = new FenshiChart('chart-container', {
 45 |   height: 400,
 46 |   backgroundColor: '#0e1117',
 47 |   lineColor: '#36a2eb',
 48 |   averageColor: '#ffcd56',
 49 |   upBarColor: '#F44336',    // 涨为红色（同花顺风格）
 50 |   downBarColor: '#4CAF50',  // 跌为绿色（同花顺风格）
 51 |   showAverage: true,
 52 |   enableScroll: true,       // 启用横向滚动
 53 |   showRightPrice: true      // 显示右侧价格标签
 54 | });
 55 | 
 56 | // 添加初始数据
 57 | const initialData = [
 58 |   { time: new Date('2023-05-15T09:30:00'), price: 10.50, volume: 2500 },
 59 |   { time: new Date('2023-05-15T09:30:01'), price: 10.48, volume: 1200 },
 60 |   // 更多数据点...
 61 | ];
 62 | chart.setInitialData(initialData);
 63 | 
 64 | // 添加实时数据点
 65 | function addNewDataPoint() {
 66 |   const newData = {
 67 |     time: new Date(),
 68 |     price: 10.52 + (Math.random() - 0.5) * 0.1,
 69 |     volume: Math.floor(Math.random() * 2000) + 500
 70 |   };
 71 |   chart.addData(newData);
 72 | }
 73 | 
 74 | // 模拟实时数据更新（每秒）
 75 | setInterval(addNewDataPoint, 1000);
 76 | ```
 77 | 
 78 | ### 从 WebSocket 获取实时数据
 79 | 
 80 | ```javascript
 81 | const chart = new FenshiChart('chart-container');
 82 | 
 83 | // 连接WebSocket
 84 | const socket = new WebSocket('wss://your-data-source.com/ws');
 85 | 
 86 | // 处理初始数据
 87 | socket.addEventListener('open', () => {
 88 |   socket.send(JSON.stringify({
 89 |     action: 'subscribe',
 90 |     symbol: 'AAPL'
 91 |   }));
 92 | });
 93 | 
 94 | // 处理实时数据更新
 95 | socket.addEventListener('message', (event) => {
 96 |   const data = JSON.parse(event.data);
 97 |   
 98 |   // 如果是初始历史数据
 99 |   if (data.type === 'history') {
100 |     const formattedData = data.data.map(item => ({
101 |       time: new Date(item.timestamp),
102 |       price: parseFloat(item.price),
103 |       volume: parseInt(item.volume)
104 |     }));
105 |     chart.setInitialData(formattedData);
106 |   } 
107 |   // 如果是实时更新
108 |   else if (data.type === 'update') {
109 |     chart.addData({
110 |       time: new Date(data.timestamp),
111 |       price: parseFloat(data.price),
112 |       volume: parseInt(data.volume)
113 |     });
114 |   }
115 | });
116 | ```
117 | 
118 | ## 配置选项
119 | 
120 | 创建图表时可以传递以下配置选项：
121 | 
122 | ```javascript
123 | const options = {
124 |   // 尺寸
125 |   width: 800,                       // 图表宽度（可选，默认使用容器宽度）
126 |   height: 400,                      // 图表高度
127 | 
128 |   // 内边距
129 |   padding: {                        // 内边距设置
130 |     top: 20,
131 |     right: 50,
132 |     bottom: 60,
133 |     left: 50
134 |   },
135 | 
136 |   // 颜色
137 |   backgroundColor: '#0e1117',       // 背景色
138 |   lineColor: '#36a2eb',             // 价格线颜色
139 |   averageColor: '#ffcd56',          // 均价线颜色
140 |   gridColor: '#333',                // 网格线颜色
141 |   textColor: '#ccc',                // 文字颜色
142 |   upBarColor: '#F44336',            // 上涨柱状图颜色（红色）
143 |   downBarColor: '#4CAF50',          // 下跌柱状图颜色（绿色）
144 |   crosshairColor: 'rgba(255,255,255,0.5)', // 十字线颜色
145 | 
146 |   // 功能设置
147 |   showAverage: true,                // 是否显示均价线
148 |   animation: true,                  // 是否启用动画
149 |   timeFormat: 'HH:mm:ss',           // 时间格式
150 |   maxDataPoints: 300,               // 最大数据点数量
151 |   gridLines: 5,                     // 水平网格线数量
152 |   barWidth: 2,                      // 柱子宽度（固定模式）
153 |   barSpacing: 1,                    // 柱子间距（固定模式）
154 |   
155 |   // 新增功能设置
156 |   enableScroll: true,               // 启用水平滚动
157 |   showRightPrice: true,             // 显示右侧价格标签
158 |   showCrosshair: true,              // 显示鼠标十字线 
159 |   tooltipEnabled: true,             // 显示鼠标悬停提示
160 |   coordinateType: 'auto',           // 坐标轴类型: 'auto'、'percent'、'limit'
161 |   limitPercentage: 10,              // 涨跌幅限制（用于'limit'坐标系）
162 |   initialPrice: 100,                // 初始参考价格，特别适用于'limit'坐标模式
163 |   infoBarEnabled: true,             // 显示顶部价格信息面板
164 |   autoHideCrosshairOnMobile: true   // 在移动设备上自动隐藏十字线
165 | };
166 | 
167 | const chart = new FenshiChart('chart-container', options);
168 | ```
169 | 
170 | ## API 参考
171 | 
172 | ### 创建图表
173 | 
174 | ```javascript
175 | const chart = new FenshiChart(container, options);
176 | ```
177 | 
178 | - `container`：字符串（元素ID）或DOM元素引用
179 | - `options`：配置选项对象（见上文）
180 | 
181 | ### 设置初始数据
182 | 
183 | ```javascript
184 | chart.setInitialData(data);
185 | ```
186 | 
187 | - `data`：数据点数组，每个数据点包含 `time`、`price` 和 `volume` 属性
188 | 
189 | ### 添加新数据点
190 | 
191 | ```javascript
192 | chart.addData(dataPoint);
193 | ```
194 | 
195 | - `dataPoint`：包含 `time`、`price` 和 `volume` 属性的对象
196 | 
197 | #### 指定买卖方向
198 | 
199 | 您可以通过设置数据点的 `direction` 属性来指定成交量柱子的颜色：
200 | 
201 | ```javascript
202 | chart.addData({
203 |   time: new Date(),
204 |   price: 10.52,
205 |   volume: 1500,
206 |   direction: 'buy' // 'buy'、'sell' 或 'neutral'
207 | });
208 | ```
209 | 
210 | 买卖方向对应的颜色：
211 | - `buy`: 红色（买入）
212 | - `sell`: 绿色（卖出）
213 | - `neutral`: 根据主题决定，暗色主题为白色，亮色主题为棕黄色
214 | - 未指定时默认为 `neutral`
215 | 
216 | ### 调整大小
217 | 
218 | ```javascript
219 | chart.resize(width, height);
220 | ```
221 | 
222 | - `width`：新宽度（可选，默认使用容器宽度）
223 | - `height`：新高度（可选，默认为400）
224 | 
225 | ### 更新配置
226 | 
227 | ```javascript
228 | chart.updateOptions(newOptions);
229 | ```
230 | 
231 | - `newOptions`：要更新的选项对象
232 | 
233 | ### 设置滚动位置
234 | 
235 | ```javascript
236 | chart.setScrollPosition(position);
237 | ```
238 | 
239 | - `position`：滚动位置（0-1之间的小数）
240 | 
241 | ### 设置初始参考价格
242 | 
243 | ```javascript
244 | chart.setInitialPrice(price);
245 | ```
246 | 
247 | - `price`：参考价格（数值类型）
248 | 
249 | 这个方法特别适用于涨停板坐标类型（'limit'），允许设置用于计算涨跌停价格的参考价格。当图表数据尚未加载或需要使用特定的价格作为涨跌计算基准时非常有用。设置初始价格后，涨停和跌停价格将根据这个价格和limitPercentage参数计算。
250 | 
251 | ### 生成模拟数据（用于测试）
252 | 
253 | ```javascript
254 | const mockData = FenshiChart.generateMockData(numPoints, startTime, startPrice);
255 | ```
256 | 
257 | - `numPoints`：要生成的数据点数量（默认100）
258 | - `startTime`：起始时间（默认为当前时间）
259 | - `startPrice`：起始价格（默认为100）
260 | 
261 | ## 交互特性
262 | 
263 | ### 横向滚动
264 | 
265 | 支持多种方式浏览大量历史数据：
266 | - 鼠标拖拽：在图表上按住鼠标左键并拖动
267 | - 触摸滑动：在移动设备上左右滑动
268 | - 滚轮滚动：使用鼠标滚轮横向滚动
269 | - 滚动条控制：通过滑块控制精确定位
270 | 
271 | ### 数据点高亮和十字线
272 | 
273 | 当鼠标悬停在图表上时，会显示十字线帮助定位价格和时间点。十字线会跟随鼠标移动，对应的数据点会高亮显示，并在轴上显示当前价格和时间信息。
274 | 
275 | ### 右侧价格标签
276 | 
277 | 右侧显示以开盘价为基准的价格变化标签，上涨和下跌使用不同颜色区分，帮助快速识别价格波动幅度。
278 | 
279 | ### 数据提示框
280 | 
281 | 鼠标悬停时会显示一个提示框，包含当前数据点的详细信息：
282 | - 时间：当前数据点的时间（时:分:秒）
283 | - 价格：当前价格
284 | - 均价：成交量加权平均价
285 | - 涨跌：相对于开盘价的变化值和百分比
286 | - 成交量：当前成交量
287 | - 金额：交易金额（价格×成交量）
288 | 
289 | ### 移动端优化
290 | 
291 | 在移动设备上访问时：
292 | - 自动禁用十字线和提示框（可通过配置更改）
293 | - 优化触摸交互体验
294 | - 响应式布局自动调整
295 | 
296 | ## 演示
297 | 
298 | 本库包含多个演示文件：
299 | 
300 | 1. `index.html` - 基本演示，展示了如何使用 FenshiChart 及其基本功能
301 | 2. `real-time-demo.html` - 模拟真实交易平台的实时数据和 UI 界面
302 | 3. `fixed-bar-example.html` - 展示固定柱宽模式和新增功能的综合演示
303 | 4. `screenshot-match.html` - 使用固定数据生成与参考图像匹配的分时图
304 | 5. `stocks-grid.html` - 多股票分时图网格展示，类似于市场总览
305 | 
306 | ## 浏览器兼容性
307 | 
308 | FenshiChart 适用于所有现代浏览器，包括：
309 | 
310 | - Chrome 60+
311 | - Firefox 60+
312 | - Safari 12+
313 | - Edge 16+
314 | 
315 | ## 许可证
316 | 
317 | MIT 
318 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="zh-CN">
  3 | <head>
  4 |   <meta charset="UTF-8">
  5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |   <title>FenshiChart - JavaScript分时图表库</title>
  7 |   <style>
  8 |     body {
  9 |       font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
 10 |       margin: 0;
 11 |       padding: 20px;
 12 |       background-color: #0e1117;
 13 |       color: #eee;
 14 |     }
 15 |     .container {
 16 |       max-width: 1200px;
 17 |       margin: 0 auto;
 18 |     }
 19 |     header {
 20 |       margin-bottom: 30px;
 21 |       text-align: center;
 22 |     }
 23 |     h1 {
 24 |       font-size: 32px;
 25 |       margin-bottom: 5px;
 26 |     }
 27 |     .subtitle {
 28 |       color: #888;
 29 |       font-size: 18px;
 30 |     }
 31 |     .chart-container {
 32 |       background-color: #0e1117;
 33 |       border: 1px solid #222;
 34 |       border-radius: 3px;
 35 |       padding: 10px;
 36 |       margin-bottom: 30px;
 37 |     }
 38 |     .controls {
 39 |       display: flex;
 40 |       gap: 10px;
 41 |       margin: 20px 0;
 42 |     }
 43 |     button {
 44 |       background-color: #1a1a1a;
 45 |       color: #eee;
 46 |       border: 1px solid #333;
 47 |       padding: 8px 16px;
 48 |       border-radius: 4px;
 49 |       cursor: pointer;
 50 |       font-size: 14px;
 51 |     }
 52 |     button:hover {
 53 |       background-color: #333;
 54 |     }
 55 |     .section {
 56 |       margin-bottom: 40px;
 57 |     }
 58 |     h2 {
 59 |       border-bottom: 1px solid #333;
 60 |       padding-bottom: 10px;
 61 |       margin-bottom: 20px;
 62 |     }
 63 |     .demo-links {
 64 |       display: flex;
 65 |       gap: 20px;
 66 |       margin-top: 30px;
 67 |     }
 68 |     .demo-link {
 69 |       background-color: #1a1a1a;
 70 |       border: 1px solid #333;
 71 |       border-radius: 5px;
 72 |       padding: 15px;
 73 |       flex: 1;
 74 |       text-decoration: none;
 75 |       color: #eee;
 76 |       transition: all 0.2s;
 77 |     }
 78 |     .demo-link:hover {
 79 |       background-color: #333;
 80 |       transform: translateY(-3px);
 81 |     }
 82 |     .demo-link h3 {
 83 |       margin-top: 0;
 84 |       color: #4896ff;
 85 |     }
 86 |     .demo-link p {
 87 |       color: #888;
 88 |       margin-bottom: 0;
 89 |     }
 90 |     .positive {
 91 |       color: #F44336; /* 涨为红色（同花顺风格） */
 92 |     }
 93 |     .negative {
 94 |       color: #4CAF50; /* 跌为绿色（同花顺风格） */
 95 |     }
 96 |     footer {
 97 |       margin-top: 50px;
 98 |       text-align: center;
 99 |       color: #666;
100 |       font-size: 14px;
101 |       padding-top: 20px;
102 |       border-top: 1px solid #333;
103 |     }
104 |   </style>
105 | </head>
106 | <body>
107 |   <div class="container">
108 |     <header>
109 |       <h1>FenshiChart</h1>
110 |       <div class="subtitle">轻量级JavaScript分时图表库，支持实时数据更新、横向滚动和价格均线</div>
111 |     </header>
112 |     
113 |     <div class="section">
114 |       <div id="demo-chart" class="chart-container"></div>
115 |       
116 |       <div class="controls">
117 |         <button id="btn-add-data">添加数据点</button>
118 |         <button id="btn-start-simulation">开始模拟</button>
119 |         <button id="btn-reset">重置图表</button>
120 |       </div>
121 |     </div>
122 |     
123 |     <div class="section">
124 |       <h2>更多演示</h2>
125 |       <div class="demo-links">
126 |         <a href="real-time-demo.html" class="demo-link">
127 |           <h3>实时数据演示</h3>
128 |           <p>更完整的实时数据演示，包含更多的配置选项和控制功能</p>
129 |         </a>
130 |         <a href="fixed-bar-example.html" class="demo-link">
131 |           <h3>固定柱宽示例</h3>
132 |           <p>使用固定柱宽模式，更适合展示大量数据点的分时图</p>
133 |         </a>
134 |         <a href="screenshot-match.html" class="demo-link">
135 |           <h3>截图模式</h3>
136 |           <p>使用固定数据生成与参考图像匹配的分时图，便于比较和调试</p>
137 |         </a>
138 |         <a href="stocks-grid.html" class="demo-link">
139 |           <h3>多股票网格视图</h3>
140 |           <p>以网格方式展示多支股票的实时行情，模拟市场总览界面</p>
141 |         </a>
142 |       </div>
143 |     </div>
144 |     
145 |     <footer>
146 |       &copy; 2023 FenshiChart | <a href="https://github.com/yourusername/fenshi-chart" style="color: #888;">GitHub</a>
147 |     </footer>
148 |   </div>
149 |   
150 |   <script src="fenshi.js"></script>
151 |   <script>
152 |     // 创建图表实例
153 |     const chart = new FenshiChart('demo-chart', {
154 |       height: 350,
155 |       backgroundColor: '#0e1117',
156 |       lineColor: '#36a2eb',
157 |       averageColor: '#ffcd56',
158 |       gridColor: '#333',
159 |       textColor: '#888',
160 |       upBarColor: '#F44336',  // 涨为红色（同花顺风格）
161 |       downBarColor: '#4CAF50',  // 跌为绿色（同花顺风格）
162 |       showAverage: true,
163 |       animation: true,
164 |       padding: { top: 20, right: 60, bottom: 30, left: 60 }
165 |     });
166 |     
167 |     // 生成初始数据
168 |     let price = 100;
169 |     let time = new Date();
170 |     time.setHours(9, 30, 0); // 设置初始时间为9:30
171 |     
172 |     // 生成初始数据
173 |     const initialData = [];
174 |     for (let i = 0; i < 60; i++) {
175 |       // 模拟价格变动
176 |       const change = (Math.random() - 0.5) * 2;
177 |       price = Math.max(90, Math.min(110, price + change));
178 |       
179 |       // 模拟成交量
180 |       const volume = Math.floor(Math.random() * 5000) + 1000;
181 |       
182 |       // 随机生成买卖方向
183 |       const directions = ['buy', 'sell', 'neutral'];
184 |       const direction = directions[Math.floor(Math.random() * directions.length)];
185 |       
186 |       // 添加数据点
187 |       initialData.push({
188 |         time: new Date(time),
189 |         price: price,
190 |         volume: volume,
191 |         direction: direction // 添加买卖方向
192 |       });
193 |       
194 |       // 时间增加1分钟
195 |       time = new Date(time.getTime() + 60000);
196 |     }
197 |     
198 |     // 设置初始数据
199 |     chart.setInitialData(initialData);
200 |     
201 |     // 获取控制元素
202 |     const btnAddData = document.getElementById('btn-add-data');
203 |     const btnStartSimulation = document.getElementById('btn-start-simulation');
204 |     const btnReset = document.getElementById('btn-reset');
205 |     
206 |     // 模拟间隔
207 |     let simulationInterval = null;
208 |     
209 |     // 添加数据点
210 |     function addDataPoint() {
211 |       // 更新时间和价格
212 |       time = new Date(time.getTime() + 60000);
213 |       const change = (Math.random() - 0.5) * 2;
214 |       price = Math.max(90, Math.min(110, price + change));
215 |       
216 |       // 随机成交量
217 |       const volume = Math.floor(Math.random() * 5000) + 1000;
218 |       
219 |       // 随机生成买卖方向
220 |       const directions = ['buy', 'sell', 'neutral'];
221 |       const direction = directions[Math.floor(Math.random() * directions.length)];
222 |       
223 |       // 添加数据点
224 |       chart.addData({
225 |         time: time,
226 |         price: price,
227 |         volume: volume,
228 |         direction: direction // 添加买卖方向
229 |       });
230 |     }
231 |     
232 |     // 开始模拟
233 |     function startSimulation() {
234 |       if (simulationInterval) {
235 |         clearInterval(simulationInterval);
236 |         btnStartSimulation.textContent = '开始模拟';
237 |         simulationInterval = null;
238 |       } else {
239 |         simulationInterval = setInterval(addDataPoint, 1000);
240 |         btnStartSimulation.textContent = '停止模拟';
241 |       }
242 |     }
243 |     
244 |     // 重置图表
245 |     function resetChart() {
246 |       // 停止模拟
247 |       if (simulationInterval) {
248 |         clearInterval(simulationInterval);
249 |         simulationInterval = null;
250 |         btnStartSimulation.textContent = '开始模拟';
251 |       }
252 |       
253 |       // 重置价格和时间
254 |       price = 100;
255 |       time = new Date();
256 |       time.setHours(9, 30, 0);
257 |       
258 |       // 重新生成数据并设置
259 |       chart.setInitialData(initialData);
260 |     }
261 |     
262 |     // 绑定事件
263 |     btnAddData.addEventListener('click', addDataPoint);
264 |     btnStartSimulation.addEventListener('click', startSimulation);
265 |     btnReset.addEventListener('click', resetChart);
266 |     
267 |     // 处理窗口调整大小
268 |     window.addEventListener('resize', () => {
269 |       const demoChart = document.getElementById('demo-chart');
270 |       chart.resize(demoChart.clientWidth);
271 |     });
272 |   </script>
273 | </body>
274 | </html> 


--------------------------------------------------------------------------------
/screenshot-match.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="zh-CN">
  3 | <head>
  4 |   <meta charset="UTF-8">
  5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |   <title>分时图表 - 截图匹配模式</title>
  7 |   <style>
  8 |     body {
  9 |       font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
 10 |       margin: 0;
 11 |       padding: A20px;
 12 |       background-color: #0e1117;
 13 |       color: #eee;
 14 |     }
 15 |     .container {
 16 |       max-width: 1200px;
 17 |       margin: 0 auto;
 18 |     }
 19 |     .header {
 20 |       display: flex;
 21 |       justify-content: space-between;
 22 |       align-items: center;
 23 |       margin-bottom: 20px;
 24 |     }
 25 |     .title {
 26 |       font-size: 24px;
 27 |       font-weight: bold;
 28 |     }
 29 |     .note {
 30 |       margin-top: 10px;
 31 |       padding: 10px;
 32 |       background-color: rgba(255, 204, 86, 0.1);
 33 |       border: 1px solid rgba(255, 204, 86, 0.3);
 34 |       border-radius: 3px;
 35 |       font-size: 14px;
 36 |       color: #ffcc56;
 37 |     }
 38 |     .reference-container {
 39 |       margin-top: 30px;
 40 |       display: flex;
 41 |       flex-direction: column;
 42 |       gap: 20px;
 43 |     }
 44 |     .chart-container {
 45 |       background-color: #0e1117;
 46 |       border: 1px solid #222;
 47 |       border-radius: 3px;
 48 |       padding: 10px;
 49 |       margin-bottom: 20px;
 50 |     }
 51 |     .section-title {
 52 |       font-size: 18px;
 53 |       margin-bottom: 15px;
 54 |       color: #ccc;
 55 |       border-bottom: 1px solid #333;
 56 |       padding-bottom: 5px;
 57 |     }
 58 |     .controls {
 59 |       display: flex;
 60 |       gap: 10px;
 61 |       margin: 20px 0;
 62 |     }
 63 |     button {
 64 |       background-color: #1a1a1a;
 65 |       color: #eee;
 66 |       border: 1px solid #333;
 67 |       padding: 8px 16px;
 68 |       border-radius: 4px;
 69 |       cursor: pointer;
 70 |       font-size: 14px;
 71 |     }
 72 |     button:hover {
 73 |       background-color: #333;
 74 |     }
 75 |     .checkbox-container {
 76 |       display: flex;
 77 |       align-items: center;
 78 |       gap: 10px;
 79 |       margin: 10px 0;
 80 |     }
 81 |     .checkbox-label {
 82 |       color: #aaa;
 83 |     }
 84 |     .slider-container {
 85 |       display: flex;
 86 |       align-items: center;
 87 |       gap: 10px;
 88 |       margin: 10px 0;
 89 |     }
 90 |     .slider-label {
 91 |       min-width: 150px;
 92 |       color: #aaa;
 93 |     }
 94 |     input[type="range"] {
 95 |       flex: 1;
 96 |       max-width: 300px;
 97 |     }
 98 |     .slider-value {
 99 |       min-width: 50px;
100 |       text-align: right;
101 |     }
102 |     .reference-image {
103 |       max-width: 100%;
104 |       border: 1px solid #333;
105 |       margin-top: 10px;
106 |       display: block;
107 |     }
108 |     .positive {
109 |       color: #F44336; /* 涨为红色（同花顺风格） */
110 |     }
111 |     .negative {
112 |       color: #4CAF50; /* 跌为绿色（同花顺风格） */
113 |     }
114 |   </style>
115 | </head>
116 | <body>
117 |   <div class="container">
118 |     <div class="header">
119 |       <div class="title">分时图截图匹配模式</div>
120 |     </div>
121 |     
122 |     <div class="note">
123 |       此模式使用固定的数据集来生成与参考图像相似的分时图表，便于进行可视化比较和调试。
124 |     </div>
125 |     
126 |     <div class="chart-container" id="chart"></div>
127 |     
128 |     <div class="controls">
129 |       <button id="btn-reset">重置图表</button>
130 |       <button id="btn-toggle-average">显示/隐藏均线</button>
131 |     </div>
132 |     
133 |     <div class="checkbox-container">
134 |       <input type="checkbox" id="show-right-price" checked>
135 |       <span class="checkbox-label">显示右侧涨跌幅</span>
136 |     </div>
137 |     
138 |     <div class="slider-container">
139 |       <span class="slider-label">柱子宽度:</span>
140 |       <input type="range" id="bar-width" min="1" max="10" value="3">
141 |       <span class="slider-value" id="bar-width-value">3px</span>
142 |     </div>
143 |     
144 |     <div class="slider-container">
145 |       <span class="slider-label">柱子间距:</span>
146 |       <input type="range" id="bar-spacing" min="0" max="5" value="1">
147 |       <span class="slider-value" id="bar-spacing-value">1px</span>
148 |     </div>
149 |     
150 |     <div class="reference-container">
151 |       <div class="section-title">参考图像</div>
152 |       <div>这是一个标准的A股分时图样例，用于比较我们的渲染效果</div>
153 |       <img src="https://img.alicdn.com/imgextra/i1/O1CN01QBybN623bUCZpWKGs_!!6000000007279-2-tps-1664-928.png" alt="A股分时图参考" class="reference-image">
154 |     </div>
155 |   </div>
156 |   
157 |   <script src="fenshi.js"></script>
158 |   <script>
159 |     // DOM 元素
160 |     const chartElement = document.getElementById('chart');
161 |     const btnReset = document.getElementById('btn-reset');
162 |     const btnToggleAverage = document.getElementById('btn-toggle-average');
163 |     const showRightPriceCheckbox = document.getElementById('show-right-price');
164 |     const barWidthSlider = document.getElementById('bar-width');
165 |     const barWidthValue = document.getElementById('bar-width-value');
166 |     const barSpacingSlider = document.getElementById('bar-spacing');
167 |     const barSpacingValue = document.getElementById('bar-spacing-value');
168 |     
169 |     // 创建图表实例
170 |     const chart = new FenshiChart('chart', {
171 |       height: 400,
172 |       backgroundColor: '#0e1117',
173 |       lineColor: '#36a2eb',
174 |       averageColor: '#ffcd56',
175 |       gridColor: '#333',
176 |       textColor: '#888',
177 |       upBarColor: '#F44336',  // 涨为红色（同花顺风格）
178 |       downBarColor: '#4CAF50',  // 跌为绿色（同花顺风格）
179 |       padding: { top: 20, right: 60, bottom: 80, left: 60 },
180 |       showAverage: true,
181 |       barWidth: parseInt(barWidthSlider.value),
182 |       barSpacing: parseInt(barSpacingSlider.value),
183 |       showRightPrice: showRightPriceCheckbox.checked
184 |     });
185 |     
186 |     // 生成固定的数据集
187 |     function generateFixedData() {
188 |       const data = [];
189 |       
190 |       // 设置基准时间为9:30
191 |       const today = new Date();
192 |       const baseTime = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 9, 30, 0);
193 |       
194 |       // 固定的价格模式 - 这里模拟一些常见的价格模式
195 |       const pricePattern = [
196 |         10.22, 10.25, 10.28, 10.26, 10.24, 10.21, 10.20, 10.22, 10.24, 10.27,
197 |         10.30, 10.32, 10.34, 10.31, 10.29, 10.30, 10.28, 10.29, 10.31, 10.28,
198 |         10.25, 10.22, 10.20, 10.18, 10.15, 10.12, 10.10, 10.08, 10.05, 10.08,
199 |         10.10, 10.12, 10.15, 10.18, 10.22, 10.25, 10.28, 10.30, 10.32, 10.35,
200 |         10.38, 10.40, 10.42, 10.44, 10.42, 10.40, 10.38, 10.35, 10.36, 10.38,
201 |         10.36, 10.34, 10.32, 10.30, 10.28, 10.26, 10.28, 10.30, 10.32, 10.34,
202 |         10.36, 10.38, 10.40, 10.42, 10.40, 10.38, 10.36, 10.34, 10.32, 10.30,
203 |         10.28, 10.26, 10.24, 10.22, 10.20, 10.18, 10.16, 10.18, 10.20, 10.22
204 |       ];
205 |       
206 |       // 设置恒定的时间间隔（3分钟）
207 |       const timeInterval = 3 * 60 * 1000;
208 |       
209 |       // 生成数据
210 |       for (let i = 0; i < pricePattern.length; i++) {
211 |         const time = new Date(baseTime.getTime() + i * timeInterval);
212 |         
213 |         // 随机但合理的成交量
214 |         const volume = Math.floor(Math.random() * 8000) + 2000;
215 |         
216 |         // 确定买卖方向
217 |         let direction;
218 |         if (i > 0) {
219 |           if (pricePattern[i] > pricePattern[i-1]) {
220 |             direction = 'buy'; // 价格上涨，买方驱动
221 |           } else if (pricePattern[i] < pricePattern[i-1]) {
222 |             direction = 'sell'; // 价格下跌，卖方驱动
223 |           } else {
224 |             direction = 'neutral'; // 价格不变，中性
225 |           }
226 |         } else {
227 |           direction = 'neutral'; // 第一个点默认中性
228 |         }
229 |         
230 |         // 添加数据点
231 |         data.push({
232 |           time: time,
233 |           price: pricePattern[i],
234 |           volume: volume,
235 |           direction: direction // 添加买卖方向
236 |         });
237 |       }
238 |       
239 |       return data;
240 |     }
241 |     
242 |     // 初始化图表
243 |     function initChart() {
244 |       const data = generateFixedData();
245 |       chart.setInitialData(data);
246 |     }
247 |     
248 |     // 绑定事件
249 |     btnReset.addEventListener('click', initChart);
250 |     
251 |     btnToggleAverage.addEventListener('click', () => {
252 |       chart.updateOptions({
253 |         showAverage: !chart.options.showAverage
254 |       });
255 |     });
256 |     
257 |     showRightPriceCheckbox.addEventListener('change', () => {
258 |       chart.updateOptions({
259 |         showRightPrice: showRightPriceCheckbox.checked
260 |       });
261 |     });
262 |     
263 |     barWidthSlider.addEventListener('input', () => {
264 |       const value = parseInt(barWidthSlider.value);
265 |       barWidthValue.textContent = `${value}px`;
266 |       chart.updateOptions({ barWidth: value });
267 |     });
268 |     
269 |     barSpacingSlider.addEventListener('input', () => {
270 |       const value = parseInt(barSpacingSlider.value);
271 |       barSpacingValue.textContent = `${value}px`;
272 |       chart.updateOptions({ barSpacing: value });
273 |     });
274 |     
275 |     // 处理窗口大小变化
276 |     window.addEventListener('resize', () => {
277 |       chart.resize(chartElement.clientWidth);
278 |     });
279 |     
280 |     // 初始化
281 |     initChart();
282 |   </script>
283 | </body>
284 | </html> 


--------------------------------------------------------------------------------
/stocks-grid.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="zh-CN">
  3 | <head>
  4 |   <meta charset="UTF-8">
  5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |   <title>超级盘口</title>
  7 |   <style>
  8 |     :root {
  9 |       --background-color: #0e1117;
 10 |       --text-color: #ccc;
 11 |       --border-color: #333;
 12 |       --up-color: #F44336;
 13 |       --down-color: #4CAF50;
 14 |       --chart-height: 300px;
 15 |       --navbar-height: 60px;
 16 |       --navbar-background: #0a0c11;
 17 |     }
 18 |     
 19 |     * {
 20 |       box-sizing: border-box;
 21 |       margin: 0;
 22 |       padding: 0;
 23 |     }
 24 |     
 25 |     body {
 26 |       font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
 27 |       background-color: var(--background-color);
 28 |       color: var(--text-color);
 29 |       min-height: 100vh;
 30 |       display: flex;
 31 |       flex-direction: column;
 32 |     }
 33 |     
 34 |     .navbar {
 35 |       position: fixed;
 36 |       top: 0;
 37 |       left: 0;
 38 |       right: 0;
 39 |       height: var(--navbar-height);
 40 |       background-color: var(--navbar-background);
 41 |       display: flex;
 42 |       align-items: center;
 43 |       justify-content: space-between;
 44 |       padding: 0 20px;
 45 |       box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
 46 |       z-index: 1000;
 47 |     }
 48 |     
 49 |     .navbar-title {
 50 |       font-size: 20px;
 51 |       font-weight: bold;
 52 |     }
 53 |     
 54 |     .navbar-controls {
 55 |       display: flex;
 56 |       align-items: center;
 57 |       gap: 20px;
 58 |     }
 59 |     
 60 |     .date-selector {
 61 |       display: flex;
 62 |       align-items: center;
 63 |       gap: 10px;
 64 |     }
 65 |     
 66 |     .date-selector input {
 67 |       padding: 8px;
 68 |       border-radius: 4px;
 69 |       border: 1px solid var(--border-color);
 70 |       background-color: #1a1a1a;
 71 |       color: var(--text-color);
 72 |     }
 73 |     
 74 |     .date-selector button {
 75 |       padding: 8px 16px;
 76 |       border-radius: 4px;
 77 |       border: 1px solid var(--border-color);
 78 |       background-color: #1a1a1a;
 79 |       color: var(--text-color);
 80 |       cursor: pointer;
 81 |       transition: background-color 0.3s;
 82 |     }
 83 |     
 84 |     .date-selector button:hover {
 85 |       background-color: #333;
 86 |     }
 87 |     
 88 |     .settings-control {
 89 |       display: flex;
 90 |       align-items: center;
 91 |       gap: 10px;
 92 |     }
 93 |     
 94 |     .settings-control label {
 95 |       font-size: 14px;
 96 |       cursor: pointer;
 97 |       display: flex;
 98 |       align-items: center;
 99 |       gap: 5px;
100 |     }
101 |     
102 |     .settings-control input[type="checkbox"] {
103 |       margin: 0;
104 |       cursor: pointer;
105 |     }
106 |     
107 |     .main-content {
108 |       flex: 1;
109 |       padding: calc(var(--navbar-height) + 20px) 20px 20px 20px;
110 |       width: 100%;
111 |     }
112 |     
113 |     .charts-grid {
114 |       display: grid;
115 |       grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
116 |       gap: 15px;
117 |       width: 100%;
118 |     }
119 |     
120 |     .stock-card {
121 |       border: 1px solid var(--border-color);
122 |       border-radius: 6px;
123 |       overflow: hidden;
124 |       background-color: #181818;
125 |       transition: transform 0.2s, box-shadow 0.2s;
126 |       height: 100%;
127 |       display: flex;
128 |       flex-direction: column;
129 |     }
130 |     
131 |     .stock-card:hover {
132 |       transform: translateY(-2px);
133 |       box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
134 |     }
135 |     
136 |     .stock-header {
137 |       display: flex;
138 |       justify-content: space-between;
139 |       align-items: center;
140 |       padding: 10px 15px;
141 |       border-bottom: 1px solid var(--border-color);
142 |     }
143 |     
144 |     .stock-name {
145 |       font-size: 18px;
146 |       font-weight: bold;
147 |     }
148 |     
149 |     .stock-code {
150 |       font-size: 14px;
151 |       color: #888;
152 |     }
153 |     
154 |     .stock-price {
155 |       font-size: 18px;
156 |       font-weight: bold;
157 |     }
158 |     
159 |     .percent-up {
160 |       color: var(--up-color);
161 |     }
162 |     
163 |     .percent-down {
164 |       color: var(--down-color);
165 |     }
166 |     
167 |     .stock-info {
168 |       padding: 10px 15px;
169 |       display: flex;
170 |       flex-wrap: wrap;
171 |       border-bottom: 1px solid var(--border-color);
172 |       transition: max-height 0.3s ease-out, opacity 0.3s ease-out, padding 0.3s ease-out;
173 |     }
174 |     
175 |     .stock-info.hidden {
176 |       max-height: 0;
177 |       padding: 0 15px;
178 |       opacity: 0;
179 |       overflow: hidden;
180 |       border-bottom: none;
181 |     }
182 |     
183 |     .info-item {
184 |       flex: 1 0 50%;
185 |       margin-bottom: 5px;
186 |       font-size: 14px;
187 |     }
188 |     
189 |     .info-label {
190 |       color: #888;
191 |       margin-right: 5px;
192 |     }
193 |     
194 |     .chart-container {
195 |       flex: 1;
196 |       min-height: var(--chart-height);
197 |       width: 100%;
198 |       overflow: hidden;
199 |     }
200 |     
201 |     .concept-tags {
202 |       padding: 10px 15px;
203 |       border-top: 1px solid var(--border-color);
204 |     }
205 |     
206 |     .tag {
207 |       display: inline-block;
208 |       padding: 4px 8px;
209 |       margin: 2px;
210 |       border-radius: 4px;
211 |       background-color: #2c2c2c;
212 |       font-size: 12px;
213 |     }
214 |     
215 |     .loading, .error {
216 |       text-align: center;
217 |       padding: 100px 0;
218 |       font-size: 18px;
219 |     }
220 |     
221 |     .error {
222 |       color: var(--up-color);
223 |     }
224 |     
225 |     @media (max-width: 768px) {
226 |       .navbar {
227 |         flex-direction: column;
228 |         height: auto;
229 |         padding: 10px;
230 |       }
231 |       
232 |       .navbar-title {
233 |         margin-bottom: 10px;
234 |       }
235 |       
236 |       .navbar-controls {
237 |         flex-direction: column;
238 |         gap: 10px;
239 |         width: 100%;
240 |       }
241 |       
242 |       .main-content {
243 |         padding-top: 140px;
244 |       }
245 |       
246 |       .charts-grid {
247 |         grid-template-columns: 1fr;
248 |       }
249 |     }
250 |     
251 |     @media (min-width: 1200px) {
252 |       .charts-grid {
253 |         grid-template-columns: repeat(auto-fit, minmax(calc(25% - 15px), 1fr));
254 |       }
255 |     }
256 |     
257 |     @media (min-width: 1600px) {
258 |       .charts-grid {
259 |         grid-template-columns: repeat(auto-fit, minmax(calc(20% - 16px), 1fr));
260 |       }
261 |     }
262 |   </style>
263 | </head>
264 | <body>
265 |   <nav class="navbar">
266 |     <div class="navbar-title">超级盘口</div>
267 |     <div class="navbar-controls">
268 |       <div class="date-selector">
269 |         <input type="date" id="date-picker" value="">
270 |         <button id="load-btn">加载股票数据</button>
271 |       </div>
272 |       <div class="settings-control">
273 |         <label>
274 |           <input type="checkbox" id="show-info-bar" checked>
275 |           <span>显示信息栏</span>
276 |         </label>
277 |       </div>
278 |     </div>
279 |   </nav>
280 |   
281 |   <main class="main-content">
282 |     <div id="loading-indicator" class="loading">载入中...</div>
283 |     <div id="error-message" class="error" style="display: none;"></div>
284 |     
285 |     <div id="charts-grid" class="charts-grid"></div>
286 |   </main>
287 |   
288 |   <script src="fenshi.js"></script>
289 |   <script>
290 |     // 应用设置状态
291 |     let showInfoBar = true;
292 |     
293 |     // 设置日期选择器默认值为今天
294 |     const today = new Date();
295 |     const dateStr = today.toISOString().split('T')[0];
296 |     document.getElementById('date-picker').value = dateStr;
297 |     
298 |     // 图表实例集合
299 |     const chartInstances = [];
300 |     
301 |     // 加载按钮点击事件
302 |     document.getElementById('load-btn').addEventListener('click', loadStocks);
303 |     
304 |     // 信息栏显示控制
305 |     document.getElementById('show-info-bar').addEventListener('change', function() {
306 |       showInfoBar = this.checked;
307 |       
308 |       // 更新所有现有卡片的信息栏状态
309 |       const infoElements = document.querySelectorAll('.stock-info');
310 |       infoElements.forEach(el => {
311 |         if (showInfoBar) {
312 |           el.classList.remove('hidden');
313 |         } else {
314 |           el.classList.add('hidden');
315 |         }
316 |       });
317 |       
318 |       // 更新图表尺寸
319 |       setTimeout(resizeAllCharts, 300);
320 |     });
321 |     
322 |     // 页面加载时自动获取数据
323 |     window.addEventListener('DOMContentLoaded', loadStocks);
324 |     
325 |     // 窗口大小改变时重绘图表
326 |     window.addEventListener('resize', () => {
327 |       setTimeout(resizeAllCharts, 100);
328 |     });
329 |     
330 |     // 重新调整所有图表大小
331 |     function resizeAllCharts() {
332 |       chartInstances.forEach(chart => {
333 |         if (chart && typeof chart.resize === 'function') {
334 |           const container = document.getElementById(`chart-${chart.stockCode}`);
335 |           if (container) {
336 |             chart.resize(container.clientWidth);
337 |           }
338 |         }
339 |       });
340 |     }
341 |     
342 |     // 加载股票数据
343 |     async function loadStocks() {
344 |       const dateInput = document.getElementById('date-picker');
345 |       const chartsGrid = document.getElementById('charts-grid');
346 |       const loadingIndicator = document.getElementById('loading-indicator');
347 |       const errorMessage = document.getElementById('error-message');
348 |       
349 |       // 显示加载指示器
350 |       loadingIndicator.style.display = 'block';
351 |       errorMessage.style.display = 'none';
352 |       chartsGrid.innerHTML = '';
353 |       
354 |       // 销毁之前的图表实例
355 |       chartInstances.forEach(chart => {
356 |         if (chart && typeof chart.destroy === 'function') {
357 |           chart.destroy();
358 |         }
359 |       });
360 |       chartInstances.length = 0;
361 |       
362 |       try {
363 |         const response = await fetch(`http://localhost:8001/stocks?date=${dateInput.value}`);
364 |         
365 |         if (!response.ok) {
366 |           throw new Error(`服务器返回错误: ${response.status} ${response.statusText}`);
367 |         }
368 |         
369 |         const stocks = await response.json();
370 |         
371 |         if (stocks.length === 0) {
372 |           throw new Error('没有找到股票数据');
373 |         }
374 |         
375 |         // 隐藏加载指示器
376 |         loadingIndicator.style.display = 'none';
377 |         
378 |         // 创建股票卡片
379 |         stocks.forEach(stock => createStockCard(stock, chartsGrid));
380 |       } catch (error) {
381 |         console.error('获取股票数据失败:', error);
382 |         loadingIndicator.style.display = 'none';
383 |         errorMessage.textContent = `获取股票数据失败: ${error.message}`;
384 |         errorMessage.style.display = 'block';
385 |       }
386 |     }
387 |     
388 |     // 创建股票卡片
389 |     function createStockCard(stock, container) {
390 |       const card = document.createElement('div');
391 |       card.className = 'stock-card';
392 |       
393 |       // 股票头部信息
394 |       const isUp = stock.percent >= 0;
395 |       const percentClass = isUp ? 'percent-up' : 'percent-down';
396 |       const percentSign = isUp ? '+' : '';
397 |       
398 |       // 根据用户设置决定信息栏是否显示
399 |       const infoBarClass = showInfoBar ? 'stock-info' : 'stock-info hidden';
400 |       
401 |       card.innerHTML = `
402 |         <div class="stock-header">
403 |           <div>
404 |             <div class="stock-name">${stock.name}</div>
405 |             <div class="stock-code">${stock.code}</div>
406 |           </div>
407 |           <div>
408 |             <div class="stock-price">${stock.price.toFixed(2)}</div>
409 |             <div class="stock-percent ${percentClass}">${percentSign}${stock.percent.toFixed(2)}%</div>
410 |           </div>
411 |         </div>
412 |         <div class="${infoBarClass}">
413 |           <div class="info-item">
414 |             <span class="info-label">市值:</span>
415 |             <span>${formatMarketCap(stock.mktcap)}</span>
416 |           </div>
417 |           <div class="info-item">
418 |             <span class="info-label">量比:</span>
419 |             <span>${stock.volume_ratio.toFixed(2)}</span>
420 |           </div>
421 |           <div class="info-item">
422 |             <span class="info-label">昨日量比:</span>
423 |             <span>${stock.yesterday_vol_ratio.toFixed(2)}</span>
424 |           </div>
425 |           <div class="info-item">
426 |             <span class="info-label">连板:</span>
427 |             <span>${stock.consecutive_boards}</span>
428 |           </div>
429 |         </div>
430 |         <div class="chart-container" id="chart-${stock.code}"></div>
431 |         <div class="concept-tags">
432 |           ${createConceptTags(stock.concept)}
433 |         </div>
434 |       `;
435 |       
436 |       container.appendChild(card);
437 |       
438 |       // 创建图表
439 |       setTimeout(() => {
440 |         createStockChart(stock);
441 |       }, 100);
442 |     }
443 |     
444 |     // 创建概念标签
445 |     function createConceptTags(conceptStr) {
446 |       if (!conceptStr) return '';
447 |       
448 |       return conceptStr.split('+')
449 |         .map(concept => `<span class="tag">${concept.trim()}</span>`)
450 |         .join('');
451 |     }
452 |     
453 |     // 格式化市值
454 |     function formatMarketCap(value) {
455 |       if (value >= 100000000) {
456 |         return (value / 100000000).toFixed(2) + '亿';
457 |       } else if (value >= 10000) {
458 |         return (value / 10000).toFixed(2) + '万';
459 |       } else {
460 |         return value.toFixed(2);
461 |       }
462 |     }
463 |     
464 |     // 创建股票图表
465 |     function createStockChart(stock) {
466 |       // 生成模拟数据
467 |       const mockData = generateMockDataForStock(stock);
468 |       
469 |       // 获取容器宽度
470 |       const container = document.getElementById(`chart-${stock.code}`);
471 |       const containerWidth = container ? container.clientWidth : undefined;
472 |       
473 |       // 创建图表实例
474 |       const chart = new FenshiChart(`chart-${stock.code}`, {
475 |         width: containerWidth,
476 |         height: parseInt(getComputedStyle(document.documentElement).getPropertyValue('--chart-height')),
477 |         theme: 'dark',
478 |         padding: { top: 20, right: 50, bottom: 30, left: 50 },
479 |         showAverage: true,
480 |         barWidth: 2,
481 |         barSpacing: 1,
482 |         enableScroll: true,
483 |         showRightPrice: true,
484 |         coordinateType: 'limit', // 使用涨停板坐标
485 |         limitPercentage: 10,     // 10%涨停幅度
486 |         showCrosshair: true,
487 |         tooltipEnabled: true,
488 |         infoBarEnabled: false
489 |       });
490 |       
491 |       // 保存股票代码便于识别
492 |       chart.stockCode = stock.code;
493 |       
494 |       // 设置初始数据
495 |       chart.setInitialData(mockData);
496 |       
497 |       // 保存图表实例
498 |       chartInstances.push(chart);
499 |     }
500 |     
501 |     // 为股票生成模拟数据
502 |     function generateMockDataForStock(stock) {
503 |       const data = [];
504 |       const basePrice = stock.price / (1 + stock.percent / 100); // 根据涨跌幅计算基准价
505 |       let price = basePrice;
506 |       let lastPrice = price;
507 |       
508 |       // 今天的日期作为基准
509 |       const today = new Date();
510 |       today.setHours(9, 30, 0, 0); // 设置为开盘时间9:30
511 |       
512 |       const startTime = new Date(today);
513 |       
514 |       // 生成一天的数据点（9:30-11:30，13:00-15:00）
515 |       for (let i = 0; i < 240; i++) {
516 |         // 中午休市时间处理（11:30-13:00）
517 |         let currentTime = new Date(startTime);
518 |         if (i >= 120) { // 下午时段
519 |           currentTime.setHours(13, 0, 0, 0);
520 |           currentTime.setMinutes(currentTime.getMinutes() + (i - 120));
521 |         } else { // 上午时段
522 |           currentTime.setMinutes(currentTime.getMinutes() + i);
523 |         }
524 |         
525 |         // 生成波动的价格，并保证最终价格接近实际价格
526 |         let progress = i / 239; // 交易日进度
527 |         let targetDelta = stock.price - basePrice; // 总体价格变化
528 |         
529 |         // 添加一些随机波动，但整体趋势朝向最终价格
530 |         let random = (Math.random() - 0.5) * 0.2; // 随机波动因子
531 |         let progressFactor = Math.pow(progress, 0.8); // 非线性进度，使价格变化在开盘时更活跃
532 |         
533 |         // 记录前一个价格
534 |         lastPrice = price;
535 |         
536 |         // 根据涨跌幅和随机因子计算当前价格
537 |         if (i === 239) {
538 |           // 确保最后一个点是精确的收盘价
539 |           price = stock.price;
540 |         } else {
541 |           price = basePrice + targetDelta * progressFactor + random * basePrice;
542 |         }
543 |         
544 |         // 生成成交量，在开盘和尾盘放量
545 |         let volume;
546 |         if (i < 30 || i > 210) {
547 |           // 开盘和尾盘放量
548 |           volume = Math.floor(Math.random() * 5000 + 2000);
549 |         } else {
550 |           // 中间时段成交量较低
551 |           volume = Math.floor(Math.random() * 3000 + 1000);
552 |         }
553 |         
554 |         // 确定买卖方向
555 |         let direction;
556 |         if (price > lastPrice) {
557 |           direction = 'buy'; // 价格上涨，买方驱动
558 |         } else if (price < lastPrice) {
559 |           direction = 'sell'; // 价格下跌，卖方驱动
560 |         } else {
561 |           direction = 'neutral'; // 价格不变，中性
562 |         }
563 |         
564 |         // 添加数据点
565 |         data.push({
566 |           time: currentTime,
567 |           price: price,
568 |           volume: volume,
569 |           direction: direction // 添加买卖方向
570 |         });
571 |       }
572 |       
573 |       return data;
574 |     }
575 |   </script>
576 | </body>
577 | </html>
578 | 


--------------------------------------------------------------------------------
/fixed-bar-example.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="zh-CN">
  3 | <head>
  4 |   <meta charset="UTF-8">
  5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |   <title>FenshiChart - 固定柱宽示例</title>
  7 |   <style>
  8 |     body {
  9 |       font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
 10 |       margin: 0;
 11 |       padding: 20px;
 12 |       transition: background-color 0.3s, color 0.3s;
 13 |     }
 14 |     body.dark-theme {
 15 |       background-color: #000;
 16 |       color: #eee;
 17 |     }
 18 |     body.light-theme {
 19 |       background-color: #f5f5f5;
 20 |       color: #333;
 21 |     }
 22 |     .container {
 23 |       max-width: 1200px;
 24 |       margin: 0 auto;
 25 |     }
 26 |     .page-header {
 27 |       text-align: center;
 28 |       margin-bottom: 30px;
 29 |     }
 30 |     .page-header h1 {
 31 |       margin-bottom: 5px;
 32 |       font-size: 28px;
 33 |     }
 34 |     .subtitle {
 35 |       color: #888;
 36 |       font-size: 16px;
 37 |     }
 38 |     .header {
 39 |       display: flex;
 40 |       justify-content: space-between;
 41 |       align-items: center;
 42 |       margin-bottom: 20px;
 43 |     }
 44 |     .title {
 45 |       font-size: 24px;
 46 |       font-weight: bold;
 47 |     }
 48 |     .chart-header {
 49 |       display: flex;
 50 |       justify-content: space-between;
 51 |       align-items: center;
 52 |       margin-bottom: 5px;
 53 |       font-size: 12px;
 54 |     }
 55 |     .stock-code {
 56 |       font-weight: bold;
 57 |     }
 58 |     .price-info {
 59 |       display: flex;
 60 |       gap: 15px;
 61 |     }
 62 |     .price-item {
 63 |       display: flex;
 64 |       gap: 5px;
 65 |     }
 66 |     .price-label {
 67 |       color: #888;
 68 |     }
 69 |     .price-value {
 70 |       font-weight: 500;
 71 |     }
 72 |     .price-value.green {
 73 |       color: #4CAF50;
 74 |     }
 75 |     .price-value.red {
 76 |       color: #F44336;
 77 |     }
 78 |     .chart-container {
 79 |       border-radius: 3px;
 80 |       padding: 10px;
 81 |       margin-bottom: 20px;
 82 |       cursor: grab;
 83 |       transition: background-color 0.3s, border-color 0.3s;
 84 |     }
 85 |     .dark-theme .chart-container {
 86 |       background-color: #000;
 87 |       border: 1px solid #222;
 88 |     }
 89 |     .light-theme .chart-container {
 90 |       background-color: #fff;
 91 |       border: 1px solid #ddd;
 92 |     }
 93 |     .chart-container:active {
 94 |       cursor: grabbing;
 95 |     }
 96 |     .controls {
 97 |       display: flex;
 98 |       gap: 10px;
 99 |       margin: 20px 0;
100 |     }
101 |     button {
102 |       padding: 8px 16px;
103 |       border-radius: 4px;
104 |       cursor: pointer;
105 |       font-size: 14px;
106 |       transition: background-color 0.3s, color 0.3s, border-color 0.3s;
107 |     }
108 |     .dark-theme button {
109 |       background-color: #1a1a1a;
110 |       color: #eee;
111 |       border: 1px solid #333;
112 |     }
113 |     .light-theme button {
114 |       background-color: #f0f0f0;
115 |       color: #333;
116 |       border: 1px solid #ccc;
117 |     }
118 |     .dark-theme button:hover {
119 |       background-color: #333;
120 |     }
121 |     .light-theme button:hover {
122 |       background-color: #e0e0e0;
123 |     }
124 |     button.active {
125 |       background-color: #1677ff;
126 |       border-color: #1677ff;
127 |       color: white;
128 |     }
129 |     .slider-container {
130 |       display: flex;
131 |       align-items: center;
132 |       gap: 10px;
133 |       margin: 20px 0;
134 |     }
135 |     .slider-label {
136 |       min-width: 150px;
137 |     }
138 |     .dark-theme .slider-label {
139 |       color: #aaa;
140 |     }
141 |     .light-theme .slider-label {
142 |       color: #555;
143 |     }
144 |     input[type="range"] {
145 |       flex: 1;
146 |       max-width: 300px;
147 |     }
148 |     .slider-value {
149 |       min-width: 50px;
150 |       text-align: right;
151 |     }
152 |     .checkbox-container {
153 |       display: flex;
154 |       align-items: center;
155 |       gap: 10px;
156 |       margin: 10px 0;
157 |     }
158 |     .dark-theme .checkbox-label {
159 |       color: #aaa;
160 |     }
161 |     .light-theme .checkbox-label {
162 |       color: #555;
163 |     }
164 |     .time-range {
165 |       margin-top: 20px;
166 |       padding-top: 20px;
167 |       transition: border-color 0.3s;
168 |     }
169 |     .dark-theme .time-range {
170 |       border-top: 1px solid #333;
171 |     }
172 |     .light-theme .time-range {
173 |       border-top: 1px solid #ddd;
174 |     }
175 |     .time-range-title {
176 |       font-size: 18px;
177 |       margin-bottom: 15px;
178 |     }
179 |     .dark-theme .time-range-title {
180 |       color: #ccc;
181 |     }
182 |     .light-theme .time-range-title {
183 |       color: #444;
184 |     }
185 |     .scroll-controls {
186 |       display: flex;
187 |       gap: 10px;
188 |       margin: 15px 0;
189 |       align-items: center;
190 |     }
191 |     .scroll-controls button {
192 |       padding: 5px 10px;
193 |     }
194 |     #scroll-position-slider {
195 |       flex: 1;
196 |     }
197 |     .settings-section {
198 |       margin-top: 20px;
199 |       padding-top: 20px;
200 |       transition: border-color 0.3s;
201 |     }
202 |     .dark-theme .settings-section {
203 |       border-top: 1px solid #333;
204 |     }
205 |     .light-theme .settings-section {
206 |       border-top: 1px solid #ddd;
207 |     }
208 |     .settings-title {
209 |       font-size: 18px;
210 |       margin-bottom: 15px;
211 |     }
212 |     .dark-theme .settings-title {
213 |       color: #ccc;
214 |     }
215 |     .light-theme .settings-title {
216 |       color: #444;
217 |     }
218 |     .settings-row {
219 |       display: flex;
220 |       flex-wrap: wrap;
221 |       gap: 20px;
222 |     }
223 |     .settings-column {
224 |       flex: 1;
225 |       min-width: 300px;
226 |     }
227 |     .section-subtitle {
228 |       font-size: 14px;
229 |       margin-bottom: 10px;
230 |       font-weight: 500;
231 |     }
232 |     .dark-theme .section-subtitle {
233 |       color: #888;
234 |     }
235 |     .light-theme .section-subtitle {
236 |       color: #555;
237 |     }
238 |     .theme-switch {
239 |       display: flex;
240 |       align-items: center;
241 |       gap: 10px;
242 |     }
243 |     .theme-icon {
244 |       font-size: 16px;
245 |     }
246 |     .btn-small {
247 |       padding: 2px 8px;
248 |       font-size: 12px;
249 |       margin-left: 5px;
250 |       cursor: pointer;
251 |       border-radius: 3px;
252 |       border: none;
253 |     }
254 |     .dark-theme .btn-small {
255 |       background: #444;
256 |       color: #ccc;
257 |     }
258 |     .light-theme .btn-small {
259 |       background: #ddd;
260 |       color: #333;
261 |     }
262 |     .dark-theme .btn-small:hover {
263 |       background: #555;
264 |     }
265 |     .light-theme .btn-small:hover {
266 |       background: #eee;
267 |     }
268 |     @media (max-width: 768px) {
269 |       .slider-container {
270 |         flex-direction: column;
271 |         align-items: flex-start;
272 |       }
273 |       .price-info {
274 |         flex-direction: column;
275 |         gap: 5px;
276 |       }
277 |     }
278 |   </style>
279 | </head>
280 | <body class="dark-theme">
281 |   <div class="container">
282 |     <div class="page-header">
283 |       <h1>FenshiChart - 固定柱宽模式</h1>
284 |       <div class="subtitle">适合显示大量数据点的分时图，支持横向滚动、数据点高亮和右侧价格显示</div>
285 |     </div>
286 |     <div class="header">
287 |       <div class="title">固定柱宽分时图表</div>
288 |       <div class="theme-switch">
289 |         <span class="theme-icon">☀️</span>
290 |         <input type="checkbox" id="theme-toggle">
291 |         <span class="theme-icon">🌙</span>
292 |       </div>
293 |     </div>
294 |     
295 |     <div class="chart-header">
296 |       <div class="stock-code">sz002923 10:26</div>
297 |       <div class="price-info">
298 |         <div class="price-item">
299 |           <span class="price-label">价:</span>
300 |           <span class="price-value red">10.22</span>
301 |         </div>
302 |         <div class="price-item">
303 |           <span class="price-label">幅:</span>
304 |           <span class="price-value green">-2.29%</span>
305 |         </div>
306 |         <div class="price-item">
307 |           <span class="price-label">均:</span>
308 |           <span class="price-value">10.28</span>
309 |         </div>
310 |       </div>
311 |     </div>
312 |     
313 |     <div id="chart" class="chart-container"></div>
314 |     
315 |     <div class="scroll-controls">
316 |       <button id="btn-scroll-left">
317 |         <span>◀</span>
318 |       </button>
319 |       <input type="range" id="scroll-position-slider" min="0" max="100" value="100">
320 |       <button id="btn-scroll-right">
321 |         <span>▶</span>
322 |       </button>
323 |       <span id="scroll-position-value">100%</span>
324 |     </div>
325 |     
326 |     <div class="settings-section">
327 |       <div class="settings-title">图表设置</div>
328 |       
329 |       <div class="settings-row">
330 |         <div class="settings-column">
331 |           <div class="section-subtitle">图表功能</div>
332 |           
333 |           <div class="checkbox-container">
334 |             <input type="checkbox" id="enable-scroll" checked>
335 |             <span class="checkbox-label">启用横向滚动</span>
336 |           </div>
337 |           
338 |           <div class="checkbox-container">
339 |             <input type="checkbox" id="show-right-price" checked>
340 |             <span class="checkbox-label">显示右侧涨跌幅</span>
341 |           </div>
342 |           
343 |           <div class="checkbox-container">
344 |             <input type="checkbox" id="show-crosshair" checked>
345 |             <span class="checkbox-label">显示十字线</span>
346 |           </div>
347 |           
348 |           <div class="checkbox-container">
349 |             <input type="checkbox" id="tooltip-enabled" checked>
350 |             <span class="checkbox-label">显示鼠标悬停提示</span>
351 |           </div>
352 |           
353 |           <div class="checkbox-container">
354 |             <input type="checkbox" id="info-bar-enabled" checked>
355 |             <span class="checkbox-label">显示信息面板</span>
356 |           </div>
357 |           
358 |           <div class="section-subtitle" style="margin-top: 15px;">坐标类型</div>
359 |           
360 |           <div class="controls" style="margin-top: 5px;">
361 |             <button id="btn-coord-normal" class="active">普通坐标</button>
362 |             <button id="btn-coord-full">满占坐标</button>
363 |             <button id="btn-coord-limit">涨停板坐标</button>
364 |           </div>
365 |           
366 |           <div class="slider-container" id="limit-percentage-container" style="display: none;">
367 |             <span class="slider-label">涨跌停百分比:</span>
368 |             <input type="range" id="limit-percentage" min="1" max="20" value="10">
369 |             <span class="slider-value" id="limit-percentage-value">10%</span>
370 |           </div>
371 |           
372 |           <div class="slider-container" id="initial-price-container" style="display: none;">
373 |             <span class="slider-label">初始参考价格:</span>
374 |             <input type="number" id="initial-price" min="0.01" step="0.01" value="10.00" style="width: 80px;">
375 |             <button id="btn-set-initial-price" class="btn-small">设置</button>
376 |           </div>
377 |         </div>
378 |         
379 |         <div class="settings-column">
380 |           <div class="section-subtitle">柱图设置</div>
381 |           
382 |           <div class="slider-container">
383 |             <span class="slider-label">柱子宽度:</span>
384 |             <input type="range" id="bar-width" min="1" max="10" value="2">
385 |             <span class="slider-value" id="bar-width-value">2px</span>
386 |           </div>
387 |           
388 |           <div class="slider-container">
389 |             <span class="slider-label">柱子间距:</span>
390 |             <input type="range" id="bar-spacing" min="0" max="5" value="1">
391 |             <span class="slider-value" id="bar-spacing-value">1px</span>
392 |           </div>
393 |         </div>
394 |       </div>
395 |     </div>
396 |     
397 |     <div class="controls">
398 |       <button id="btn-add-data">添加数据点</button>
399 |       <button id="btn-simulate">模拟实时数据</button>
400 |       <button id="btn-reset">重置</button>
401 |     </div>
402 |     
403 |     <div class="time-range">
404 |       <div class="time-range-title">数据量控制</div>
405 |       
406 |       <div class="controls">
407 |         <button id="btn-data-small" class="active">少量数据</button>
408 |         <button id="btn-data-medium">中量数据</button>
409 |         <button id="btn-data-large">大量数据</button>
410 |       </div>
411 |       
412 |       <div class="slider-container">
413 |         <span class="slider-label">数据点数量:</span>
414 |         <input type="range" id="data-points" min="50" max="1000" value="100">
415 |         <span class="slider-value" id="data-points-value">100</span>
416 |       </div>
417 |     </div>
418 |   </div>
419 |   
420 |   <script src="fenshi.js"></script>
421 |   <script>
422 |     // 当前主题
423 |     let currentTheme = 'dark';
424 |     // 当前坐标类型
425 |     let currentCoordinateType = 'normal';
426 |     
427 |     // 创建图表实例
428 |     const chart = new FenshiChart('chart', {
429 |       height: 400,
430 |       theme: currentTheme,
431 |       padding: { top: 20, right: 60, bottom: 20, left: 60 },
432 |       showAverage: true,
433 |       barWidth: 2,
434 |       barSpacing: 1,
435 |       enableScroll: true,
436 |       showRightPrice: true,
437 |       showCrosshair: true,
438 |       tooltipEnabled: true,
439 |       coordinateType: currentCoordinateType,
440 |       limitPercentage: 10,
441 |       initialPrice: 10.33
442 |     });
443 |     
444 |     // 获取控制元素
445 |     const barWidthSlider = document.getElementById('bar-width');
446 |     const barWidthValue = document.getElementById('bar-width-value');
447 |     const barSpacingSlider = document.getElementById('bar-spacing');
448 |     const barSpacingValue = document.getElementById('bar-spacing-value');
449 |     const btnAddData = document.getElementById('btn-add-data');
450 |     const btnSimulate = document.getElementById('btn-simulate');
451 |     const btnReset = document.getElementById('btn-reset');
452 |     const enableScrollCheckbox = document.getElementById('enable-scroll');
453 |     const showRightPriceCheckbox = document.getElementById('show-right-price');
454 |     const showCrosshairCheckbox = document.getElementById('show-crosshair');
455 |     const tooltipEnabledCheckbox = document.getElementById('tooltip-enabled');
456 |     const infoBarEnabledCheckbox = document.getElementById('info-bar-enabled');
457 |     const dataPointsSlider = document.getElementById('data-points');
458 |     const dataPointsValue = document.getElementById('data-points-value');
459 |     const btnDataSmall = document.getElementById('btn-data-small');
460 |     const btnDataMedium = document.getElementById('btn-data-medium');
461 |     const btnDataLarge = document.getElementById('btn-data-large');
462 |     const scrollPositionSlider = document.getElementById('scroll-position-slider');
463 |     const scrollPositionValue = document.getElementById('scroll-position-value');
464 |     const btnScrollLeft = document.getElementById('btn-scroll-left');
465 |     const btnScrollRight = document.getElementById('btn-scroll-right');
466 |     const themeToggle = document.getElementById('theme-toggle');
467 |     
468 |     // 坐标类型控制元素
469 |     const btnCoordNormal = document.getElementById('btn-coord-normal');
470 |     const btnCoordFull = document.getElementById('btn-coord-full');
471 |     const btnCoordLimit = document.getElementById('btn-coord-limit');
472 |     const limitPercentageSlider = document.getElementById('limit-percentage');
473 |     const limitPercentageValue = document.getElementById('limit-percentage-value');
474 |     const limitPercentageContainer = document.getElementById('limit-percentage-container');
475 |     const initialPriceContainer = document.getElementById('initial-price-container');
476 |     const initialPriceInput = document.getElementById('initial-price');
477 |     
478 |     // 当前价格和时间
479 |     let currentPrice = 10.22;
480 |     let currentTime = new Date();
481 |     let simulationInterval;
482 |     let dataPointsCount = 100;
483 |     
484 |     // 初始化图表数据
485 |     function initializeChart() {
486 |       // 生成初始数据
487 |       const mockData = generateInitialData();
488 |       chart.setInitialData(mockData);
489 |       
490 |       // 更新当前价格和时间
491 |       if (mockData.length > 0) {
492 |         currentPrice = mockData[mockData.length - 1].price;
493 |         currentTime = mockData[mockData.length - 1].time;
494 |       }
495 |     }
496 |     
497 |     // 生成初始数据
498 |     function generateInitialData() {
499 |       const data = [];
500 |       
501 |       // 从9:30开始生成数据点
502 |       const today = new Date();
503 |       const baseTime = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 9, 30, 0);
504 |       let time = new Date(baseTime);
505 |       let price = 10.0;
506 |       
507 |       // 买卖方向
508 |       const directions = ['buy', 'sell', 'neutral'];
509 |       
510 |       for (let i = 0; i < dataPointsCount; i++) {
511 |         // 模拟价格变动
512 |         const change = (Math.random() - 0.5) * 0.1;
513 |         price = Math.max(9.5, Math.min(10.5, price + change));
514 |         
515 |         // 模拟成交量
516 |         const volume = Math.floor(Math.random() * 5000) + 500;
517 |         
518 |         // 随机选择买卖方向
519 |         const direction = directions[Math.floor(Math.random() * directions.length)];
520 |         
521 |         // 添加数据点
522 |         data.push({
523 |           time: new Date(time),
524 |           price: price,
525 |           volume: volume,
526 |           direction: direction // 添加买卖方向
527 |         });
528 |         
529 |         // 时间增加5秒
530 |         time = new Date(time.getTime() + 5000);
531 |       }
532 |       
533 |       return data;
534 |     }
535 |     
536 |     // 添加单个数据点
537 |     function addDataPoint() {
538 |       // 更新时间（增加5秒）
539 |       currentTime = new Date(currentTime.getTime() + 5000);
540 |       
541 |       // 生成新价格（随机波动）
542 |       const change = (Math.random() - 0.5) * 0.05;
543 |       currentPrice = Math.max(9.5, Math.min(10.5, currentPrice + change));
544 |       
545 |       // 随机成交量
546 |       const volume = Math.floor(Math.random() * 3000) + 500;
547 |       
548 |       // 随机生成买卖方向
549 |       const directions = ['buy', 'sell', 'neutral'];
550 |       const direction = directions[Math.floor(Math.random() * directions.length)];
551 |       
552 |       // 添加到图表
553 |       chart.addData({
554 |         time: currentTime,
555 |         price: currentPrice,
556 |         volume: volume,
557 |         direction: direction // 添加买卖方向
558 |       });
559 |       
560 |       // 更新滚动位置滑块
561 |       updateScrollPositionSlider();
562 |     }
563 |     
564 |     // 开始实时数据模拟
565 |     function startSimulation() {
566 |       // 清除任何现有的模拟
567 |       stopSimulation();
568 |       
569 |       // 每秒添加一个数据点
570 |       simulationInterval = setInterval(() => {
571 |         addDataPoint();
572 |       }, 1000);
573 |       
574 |       // 更新按钮文本
575 |       btnSimulate.textContent = "停止模拟";
576 |       btnSimulate.onclick = stopSimulation;
577 |     }
578 |     
579 |     // 停止实时数据模拟
580 |     function stopSimulation() {
581 |       clearInterval(simulationInterval);
582 |       btnSimulate.textContent = "模拟实时数据";
583 |       btnSimulate.onclick = startSimulation;
584 |     }
585 |     
586 |     // 重置图表
587 |     function resetChart() {
588 |       stopSimulation();
589 |       initializeChart();
590 |       updateScrollPositionSlider();
591 |     }
592 |     
593 |     // 更新图表设置
594 |     function updateChartSettings() {
595 |       const barWidth = parseInt(barWidthSlider.value);
596 |       const barSpacing = parseInt(barSpacingSlider.value);
597 |       const enableScroll = enableScrollCheckbox.checked;
598 |       const showRightPrice = showRightPriceCheckbox.checked;
599 |       const showCrosshair = showCrosshairCheckbox.checked;
600 |       const tooltipEnabled = tooltipEnabledCheckbox.checked;
601 |       const infoBarEnabled = infoBarEnabledCheckbox.checked;
602 |       
603 |       chart.updateOptions({
604 |         barWidth: barWidth,
605 |         barSpacing: barSpacing,
606 |         enableScroll: enableScroll,
607 |         showRightPrice: showRightPrice,
608 |         showCrosshair: showCrosshair,
609 |         tooltipEnabled: tooltipEnabled,
610 |         infoBarEnabled: infoBarEnabled
611 |       });
612 |       
613 |       // 更新信息面板显示状态
614 |       updateChartHeader(infoBarEnabled);
615 |       
616 |       barWidthValue.textContent = `${barWidth}px`;
617 |       barSpacingValue.textContent = `${barSpacing}px`;
618 |     }
619 |     
620 |     // 切换坐标类型
621 |     function setCoordinateType(type) {
622 |       currentCoordinateType = type;
623 |       
624 |       // 设置按钮状态
625 |       btnCoordNormal.classList.remove('active');
626 |       btnCoordFull.classList.remove('active');
627 |       btnCoordLimit.classList.remove('active');
628 |       
629 |       // 显示/隐藏涨跌停百分比设置
630 |       if (type === 'limit') {
631 |         btnCoordLimit.classList.add('active');
632 |         limitPercentageContainer.style.display = 'flex';
633 |       } else if (type === 'full') {
634 |         btnCoordFull.classList.add('active');
635 |         limitPercentageContainer.style.display = 'none';
636 |       } else {
637 |         btnCoordNormal.classList.add('active');
638 |         limitPercentageContainer.style.display = 'none';
639 |       }
640 |       
641 |       // 更新图表
642 |       chart.updateOptions({
643 |         coordinateType: type
644 |       });
645 |     }
646 |     
647 |     // 更新滚动位置滑块
648 |     function updateScrollPositionSlider() {
649 |       const scrollPosition = chart.options.scrollPosition * 100;
650 |       scrollPositionSlider.value = scrollPosition;
651 |       scrollPositionValue.textContent = `${Math.round(scrollPosition)}%`;
652 |     }
653 |     
654 |     // 切换主题
655 |     function toggleTheme() {
656 |       const body = document.body;
657 |       currentTheme = currentTheme === 'dark' ? 'light' : 'dark';
658 |       
659 |       // 更新 body 类
660 |       body.classList.remove('dark-theme', 'light-theme');
661 |       body.classList.add(`${currentTheme}-theme`);
662 |       
663 |       // 更新图表主题
664 |       chart.updateOptions({
665 |         theme: currentTheme
666 |       });
667 |     }
668 |     
669 |     // 事件监听
670 |     barWidthSlider.addEventListener('input', function() {
671 |       updateChartSettings();
672 |     });
673 |     
674 |     barSpacingSlider.addEventListener('input', function() {
675 |       updateChartSettings();
676 |     });
677 |     
678 |     enableScrollCheckbox.addEventListener('change', function() {
679 |       updateChartSettings();
680 |     });
681 |     
682 |     showRightPriceCheckbox.addEventListener('change', function() {
683 |       updateChartSettings();
684 |     });
685 |     
686 |     showCrosshairCheckbox.addEventListener('change', function() {
687 |       updateChartSettings();
688 |     });
689 |     
690 |     tooltipEnabledCheckbox.addEventListener('change', function() {
691 |       updateChartSettings();
692 |     });
693 |     
694 |     infoBarEnabledCheckbox.addEventListener('change', function() {
695 |       updateChartSettings();
696 |     });
697 |     
698 |     dataPointsSlider.addEventListener('input', function() {
699 |       dataPointsCount = parseInt(this.value);
700 |       dataPointsValue.textContent = dataPointsCount;
701 |     });
702 |     
703 |     dataPointsSlider.addEventListener('change', function() {
704 |       resetChart();
705 |       
706 |       // 更新数据量按钮状态
707 |       if (dataPointsCount <= 100) {
708 |         setActiveDataButton(btnDataSmall);
709 |       } else if (dataPointsCount <= 300) {
710 |         setActiveDataButton(btnDataMedium);
711 |       } else {
712 |         setActiveDataButton(btnDataLarge);
713 |       }
714 |     });
715 |     
716 |     // 主题切换事件
717 |     themeToggle.addEventListener('change', toggleTheme);
718 |     
719 |     // 坐标类型按钮事件
720 |     btnCoordNormal.addEventListener('click', function() {
721 |       setCoordinateType('normal');
722 |     });
723 |     
724 |     btnCoordFull.addEventListener('click', function() {
725 |       setCoordinateType('full');
726 |     });
727 |     
728 |     btnCoordLimit.addEventListener('click', function() {
729 |       setCoordinateType('limit');
730 |     });
731 |     
732 |     // 涨跌停百分比滑块事件
733 |     limitPercentageSlider.addEventListener('input', function() {
734 |       const value = parseInt(this.value);
735 |       limitPercentageValue.textContent = `${value}%`;
736 |       
737 |       if (currentCoordinateType === 'limit') {
738 |         chart.updateOptions({
739 |           limitPercentage: value
740 |         });
741 |       }
742 |     });
743 |     
744 |     btnAddData.addEventListener('click', addDataPoint);
745 |     btnSimulate.addEventListener('click', startSimulation);
746 |     btnReset.addEventListener('click', resetChart);
747 |     
748 |     btnDataSmall.addEventListener('click', function() {
749 |       setActiveDataButton(this);
750 |       dataPointsCount = 100;
751 |       dataPointsSlider.value = dataPointsCount;
752 |       dataPointsValue.textContent = dataPointsCount;
753 |       resetChart();
754 |     });
755 |     
756 |     btnDataMedium.addEventListener('click', function() {
757 |       setActiveDataButton(this);
758 |       dataPointsCount = 300;
759 |       dataPointsSlider.value = dataPointsCount;
760 |       dataPointsValue.textContent = dataPointsCount;
761 |       resetChart();
762 |     });
763 |     
764 |     btnDataLarge.addEventListener('click', function() {
765 |       setActiveDataButton(this);
766 |       dataPointsCount = 600;
767 |       dataPointsSlider.value = dataPointsCount;
768 |       dataPointsValue.textContent = dataPointsCount;
769 |       resetChart();
770 |     });
771 |     
772 |     // 设置活动数据按钮
773 |     function setActiveDataButton(button) {
774 |       btnDataSmall.classList.remove('active');
775 |       btnDataMedium.classList.remove('active');
776 |       btnDataLarge.classList.remove('active');
777 |       button.classList.add('active');
778 |     }
779 |     
780 |     // 滚动控制
781 |     scrollPositionSlider.addEventListener('input', function() {
782 |       const position = parseInt(this.value) / 100;
783 |       chart.setScrollPosition(position);
784 |       scrollPositionValue.textContent = `${this.value}%`;
785 |     });
786 |     
787 |     btnScrollLeft.addEventListener('click', function() {
788 |       const newPosition = Math.max(0, parseFloat(scrollPositionSlider.value) - 10);
789 |       scrollPositionSlider.value = newPosition;
790 |       chart.setScrollPosition(newPosition / 100);
791 |       scrollPositionValue.textContent = `${Math.round(newPosition)}%`;
792 |     });
793 |     
794 |     btnScrollRight.addEventListener('click', function() {
795 |       const newPosition = Math.min(100, parseFloat(scrollPositionSlider.value) + 10);
796 |       scrollPositionSlider.value = newPosition;
797 |       chart.setScrollPosition(newPosition / 100);
798 |       scrollPositionValue.textContent = `${Math.round(newPosition)}%`;
799 |     });
800 |     
801 |     // 移动设备检测，自动调整十字线和提示框
802 |     function isMobileDevice() {
803 |       return (window.innerWidth <= 768) || 
804 |              ('ontouchstart' in window) || 
805 |              (navigator.maxTouchPoints > 0);
806 |     }
807 |     
808 |     if (isMobileDevice()) {
809 |       showCrosshairCheckbox.checked = false;
810 |       tooltipEnabledCheckbox.checked = false;
811 |       updateChartSettings();
812 |     }
813 |     
814 |     // 更新图表头部信息面板显示
815 |     function updateChartHeader(show) {
816 |       const chartHeader = document.querySelector('.chart-header');
817 |       if (chartHeader) {
818 |         chartHeader.style.display = show ? 'flex' : 'none';
819 |       }
820 |     }
821 |     
822 |     // 初始化
823 |     initializeChart();
824 |     updateScrollPositionSlider();
825 |     
826 |     // 初始化信息面板显示状态
827 |     updateChartHeader(infoBarEnabledCheckbox.checked);
828 |   </script>
829 | </body>
830 | </html> 


--------------------------------------------------------------------------------
/real-time-demo.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="zh-CN">
  3 | <head>
  4 |   <meta charset="UTF-8">
  5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |   <title>实时分时图表 - Real-time FenshiChart Demo</title>
  7 |   <style>
  8 |     body {
  9 |       font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 10 |       margin: 0;
 11 |       padding: 0;
 12 |       background-color: #141414;
 13 |       color: #f0f0f0;
 14 |     }
 15 |     .app-container {
 16 |       display: flex;
 17 |       flex-direction: column;
 18 |       height: 100vh;
 19 |     }
 20 |     .header {
 21 |       background-color: #1f1f1f;
 22 |       padding: 10px 20px;
 23 |       display: flex;
 24 |       justify-content: space-between;
 25 |       align-items: center;
 26 |       box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
 27 |     }
 28 |     .logo {
 29 |       font-size: 20px;
 30 |       font-weight: bold;
 31 |       color: #1677ff;
 32 |     }
 33 |     .main-content {
 34 |       display: flex;
 35 |       flex: 1;
 36 |     }
 37 |     .sidebar {
 38 |       width: 250px;
 39 |       background-color: #1f1f1f;
 40 |       padding: 20px;
 41 |       border-right: 1px solid #333;
 42 |     }
 43 |     .watchlist {
 44 |       margin-top: 20px;
 45 |     }
 46 |     .watchlist-header {
 47 |       font-size: 14px;
 48 |       color: #888;
 49 |       margin-bottom: 10px;
 50 |       display: flex;
 51 |       justify-content: space-between;
 52 |     }
 53 |     .watchlist-item {
 54 |       padding: 10px;
 55 |       border-radius: 4px;
 56 |       margin-bottom: 8px;
 57 |       cursor: pointer;
 58 |       transition: background-color 0.2s;
 59 |     }
 60 |     .watchlist-item:hover {
 61 |       background-color: #2a2a2a;
 62 |     }
 63 |     .watchlist-item.active {
 64 |       background-color: rgba(22, 119, 255, 0.1);
 65 |       border-left: 3px solid #1677ff;
 66 |     }
 67 |     .stock-code {
 68 |       font-weight: bold;
 69 |       font-size: 14px;
 70 |     }
 71 |     .stock-name {
 72 |       font-size: 12px;
 73 |       color: #888;
 74 |       margin-top: 2px;
 75 |     }
 76 |     .price-info {
 77 |       font-size: 14px;
 78 |       display: flex;
 79 |       justify-content: space-between;
 80 |       margin-top: 5px;
 81 |     }
 82 |     .price-change {
 83 |       padding: 2px 6px;
 84 |       border-radius: 3px;
 85 |       font-size: 12px;
 86 |     }
 87 |     .price-up {
 88 |       color: #26A69A;
 89 |     }
 90 |     .price-down {
 91 |       color: #EF5350;
 92 |     }
 93 |     .chart-section {
 94 |       flex: 1;
 95 |       padding: 20px;
 96 |       overflow: hidden;
 97 |       display: flex;
 98 |       flex-direction: column;
 99 |     }
100 |     .chart-header {
101 |       display: flex;
102 |       justify-content: space-between;
103 |       align-items: center;
104 |       margin-bottom: 20px;
105 |     }
106 |     .stock-details {
107 |       display: flex;
108 |       flex-direction: column;
109 |     }
110 |     .stock-title {
111 |       font-size: 24px;
112 |       font-weight: bold;
113 |     }
114 |     .stock-subtitle {
115 |       font-size: 14px;
116 |       color: #888;
117 |       margin-top: 5px;
118 |     }
119 |     .controls {
120 |       display: flex;
121 |       gap: 10px;
122 |     }
123 |     button {
124 |       background-color: #2a2a2a;
125 |       color: #f0f0f0;
126 |       border: 1px solid #444;
127 |       padding: 8px 16px;
128 |       border-radius: 4px;
129 |       cursor: pointer;
130 |       font-size: 14px;
131 |       transition: all 0.2s;
132 |     }
133 |     button:hover {
134 |       background-color: #333;
135 |       border-color: #666;
136 |     }
137 |     button.selected {
138 |       background-color: #1677ff;
139 |       border-color: #1677ff;
140 |       color: white;
141 |     }
142 |     .chart-container {
143 |       flex: 1;
144 |       background-color: #1a1a1a;
145 |       border-radius: 8px;
146 |       overflow: hidden;
147 |       position: relative;
148 |       box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
149 |     }
150 |     .status-bar {
151 |       background-color: #1f1f1f;
152 |       padding: 10px 20px;
153 |       font-size: 12px;
154 |       color: #888;
155 |       display: flex;
156 |       justify-content: space-between;
157 |     }
158 |     .connection-status {
159 |       display: flex;
160 |       align-items: center;
161 |     }
162 |     .status-indicator {
163 |       width: 8px;
164 |       height: 8px;
165 |       border-radius: 50%;
166 |       margin-right: 6px;
167 |     }
168 |     .connected {
169 |       background-color: #4CAF50;
170 |     }
171 |     .connecting {
172 |       background-color: #FFC107;
173 |     }
174 |     .disconnected {
175 |       background-color: #F44336;
176 |     }
177 |     .time-frames {
178 |       display: flex;
179 |       background-color: #2a2a2a;
180 |       border-radius: 4px;
181 |       overflow: hidden;
182 |       margin-left: 10px;
183 |     }
184 |     .time-frame {
185 |       padding: 4px 10px;
186 |       font-size: 12px;
187 |       cursor: pointer;
188 |     }
189 |     .time-frame.active {
190 |       background-color: #1677ff;
191 |       color: white;
192 |     }
193 |     .positive {
194 |       color: #F44336; /* 涨为红色（同花顺风格） */
195 |     }
196 |     .negative {
197 |       color: #4CAF50; /* 跌为绿色（同花顺风格） */
198 |     }
199 |   </style>
200 | </head>
201 | <body>
202 |   <div class="app-container">
203 |     <div class="header">
204 |       <div class="logo">分时行情 FenshiChart</div>
205 |       <div class="connection-status">
206 |         <div id="status-indicator" class="status-indicator connecting"></div>
207 |         <span id="connection-status">Connecting...</span>
208 |       </div>
209 |     </div>
210 |     
211 |     <div class="main-content">
212 |       <div class="sidebar">
213 |         <div class="watchlist">
214 |           <div class="watchlist-header">
215 |             <span>自选股票</span>
216 |             <span>价格</span>
217 |           </div>
218 |           <div id="watchlist-container">
219 |             <!-- Watchlist items will be populated here -->
220 |           </div>
221 |         </div>
222 |       </div>
223 |       
224 |       <div class="chart-section">
225 |         <div class="chart-header">
226 |           <div class="stock-details">
227 |             <div class="stock-title" id="current-stock-title">sz002923 - 测试股票</div>
228 |             <div class="stock-subtitle" id="current-stock-price">价格: 10.22 <span class="price-down">-2.29%</span></div>
229 |           </div>
230 |           
231 |           <div class="controls">
232 |             <div class="time-frames">
233 |               <div class="time-frame active" data-timeframe="1m">分时</div>
234 |               <div class="time-frame" data-timeframe="5m">5分钟</div>
235 |               <div class="time-frame" data-timeframe="15m">15分钟</div>
236 |               <div class="time-frame" data-timeframe="30m">30分钟</div>
237 |             </div>
238 |             <button id="btn-realtime" class="selected">实时</button>
239 |             <button id="btn-historical">历史</button>
240 |             <button id="btn-pause">暂停</button>
241 |           </div>
242 |         </div>
243 |         
244 |         <div id="chart" class="chart-container"></div>
245 |       </div>
246 |     </div>
247 |     
248 |     <div class="status-bar">
249 |       <div id="data-timestamp">最后更新: --:--:--</div>
250 |       <div id="data-count">数据点: 0</div>
251 |     </div>
252 |   </div>
253 |   
254 |   <script src="fenshi.js"></script>
255 |   <script>
256 |     // Stock data class - simulates WebSocket connection and data handling
257 |     class StockDataService {
258 |       constructor(onDataCallback, onConnectionChange) {
259 |         this.stocks = {
260 |           'sz002923': { code: 'sz002923', name: '润都股份', price: 10.22, change: -2.29, open: 10.50 },
261 |           'sh601318': { code: 'sh601318', name: '中国平安', price: 42.15, change: 1.35, open: 41.59 },
262 |           'sh600036': { code: 'sh600036', name: '招商银行', price: 35.67, change: 0.74, open: 35.40 },
263 |           'sz000002': { code: 'sz000002', name: '万科A', price: 8.58, change: -0.92, open: 8.66 },
264 |           'sh600519': { code: 'sh600519', name: '贵州茅台', price: 1542.00, change: 2.17, open: 1510.50 },
265 |           'sh688981': { code: 'sh688981', name: '中芯国际', price: 56.82, change: 3.65, open: 54.82 },
266 |           'sz300750': { code: 'sz300750', name: '宁德时代', price: 203.46, change: -1.23, open: 205.95 },
267 |           'sh600276': { code: 'sh600276', name: '恒瑞医药', price: 23.12, change: 0.52, open: 23.01 }
268 |         };
269 |         
270 |         this.currentStock = 'sz002923';
271 |         this.connected = false;
272 |         this.paused = false;
273 |         this.dataInterval = null;
274 |         this.reconnectInterval = null;
275 |         this.historicalMode = false;
276 |         
277 |         this.onDataCallback = onDataCallback;
278 |         this.onConnectionChange = onConnectionChange;
279 |         
280 |         this.historicalData = {};
281 |         this.realtimeData = {};
282 |         
283 |         // Initialize with empty data arrays for each stock
284 |         Object.keys(this.stocks).forEach(code => {
285 |           this.historicalData[code] = [];
286 |           this.realtimeData[code] = [];
287 |         });
288 |       }
289 |       
290 |       connect() {
291 |         this.onConnectionChange('connecting');
292 |         
293 |         // Simulate connection delay
294 |         setTimeout(() => {
295 |           this.connected = true;
296 |           this.onConnectionChange('connected');
297 |           
298 |           // Load initial historical data
299 |           this.loadHistoricalData(this.currentStock);
300 |           
301 |           // Start data stream if not in historical mode
302 |           if (!this.historicalMode) {
303 |             this.startRealTimeUpdates();
304 |           }
305 |         }, 1500);
306 |         
307 |         // Set up automatic reconnection
308 |         this.reconnectInterval = setInterval(() => {
309 |           if (!this.connected && !this.paused) {
310 |             this.connect();
311 |           }
312 |         }, 5000);
313 |       }
314 |       
315 |       disconnect() {
316 |         this.connected = false;
317 |         this.onConnectionChange('disconnected');
318 |         clearInterval(this.dataInterval);
319 |         clearInterval(this.reconnectInterval);
320 |       }
321 |       
322 |       togglePause() {
323 |         this.paused = !this.paused;
324 |         
325 |         if (this.paused) {
326 |           clearInterval(this.dataInterval);
327 |         } else if (this.connected && !this.historicalMode) {
328 |           this.startRealTimeUpdates();
329 |         }
330 |         
331 |         return this.paused;
332 |       }
333 |       
334 |       switchStock(stockCode) {
335 |         if (this.stocks[stockCode]) {
336 |           this.currentStock = stockCode;
337 |           
338 |           if (this.historicalMode) {
339 |             this.loadHistoricalData(stockCode);
340 |           } else {
341 |             // If we already have some realtime data, use it
342 |             if (this.realtimeData[stockCode].length > 0) {
343 |               this.onDataCallback({
344 |                 stockCode: stockCode,
345 |                 stockInfo: this.stocks[stockCode],
346 |                 data: this.realtimeData[stockCode],
347 |                 isInitialData: true
348 |               });
349 |             } else {
350 |               // Otherwise generate initial data and start streaming
351 |               this.generateInitialData(stockCode);
352 |             }
353 |           }
354 |           
355 |           return this.stocks[stockCode];
356 |         }
357 |         return null;
358 |       }
359 |       
360 |       setHistoricalMode(enabled) {
361 |         this.historicalMode = enabled;
362 |         
363 |         if (enabled) {
364 |           clearInterval(this.dataInterval);
365 |           this.loadHistoricalData(this.currentStock);
366 |         } else {
367 |           // Switch to real-time mode
368 |           if (this.connected && !this.paused) {
369 |             this.startRealTimeUpdates();
370 |           }
371 |         }
372 |       }
373 |       
374 |       loadHistoricalData(stockCode) {
375 |         const stock = this.stocks[stockCode];
376 |         
377 |         // If we've already generated historical data, use it
378 |         if (this.historicalData[stockCode].length > 0) {
379 |           this.onDataCallback({
380 |             stockCode: stockCode,
381 |             stockInfo: stock,
382 |             data: this.historicalData[stockCode],
383 |             isInitialData: true
384 |           });
385 |           return;
386 |         }
387 |         
388 |         // Generate historical data (one trading day)
389 |         const data = this.generateHistoricalData(stock);
390 |         this.historicalData[stockCode] = data;
391 |         
392 |         // Send data to callback
393 |         this.onDataCallback({
394 |           stockCode: stockCode,
395 |           stockInfo: stock,
396 |           data: data,
397 |           isInitialData: true
398 |         });
399 |       }
400 |       
401 |       generateHistoricalData(stock) {
402 |         const today = new Date();
403 |         const marketOpen = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 9, 30, 0);
404 |         const marketClose = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 15, 0, 0);
405 |         
406 |         // Create a full day of trading data
407 |         const data = [];
408 |         let time = new Date(marketOpen);
409 |         let price = stock.open;
410 |         let lastPrice = price;
411 |         
412 |         // Morning session (9:30 - 11:30)
413 |         while (time < new Date(today.getFullYear(), today.getMonth(), today.getDate(), 11, 30, 0)) {
414 |           // Random price movement biased towards final change
415 |           const targetChange = stock.price - stock.open;
416 |           const progressRatio = (time.getTime() - marketOpen.getTime()) / 
417 |                                (marketClose.getTime() - marketOpen.getTime());
418 |           
419 |           // Bias towards the target change, but with randomness
420 |           const bias = targetChange * progressRatio * 0.3;
421 |           const randomComponent = (Math.random() - 0.5) * 0.1;
422 |           const change = bias + randomComponent;
423 |           
424 |           price = Math.max(0.01, price + change);
425 |           
426 |           // Calculate volume - higher at open and near significant price movements
427 |           let volume = Math.floor(Math.random() * 5000) + 1000;
428 |           
429 |           // Higher volume at market open
430 |           if (time.getTime() - marketOpen.getTime() < 10 * 60 * 1000) {
431 |             volume *= 2.5;
432 |           }
433 |           
434 |           // Higher volume on significant price moves
435 |           if (Math.abs(price - lastPrice) > Math.abs(targetChange) * 0.01) {
436 |             volume *= 1.5;
437 |           }
438 |           
439 |           // 确定买卖方向
440 |           let direction;
441 |           if (price > lastPrice) {
442 |             direction = 'buy'; // 价格上涨，买方驱动
443 |           } else if (price < lastPrice) {
444 |             direction = 'sell'; // 价格下跌，卖方驱动
445 |           } else {
446 |             direction = 'neutral'; // 价格不变，中性
447 |           }
448 |           
449 |           data.push({
450 |             time: new Date(time),
451 |             price: price,
452 |             volume: volume,
453 |             direction: direction // 添加买卖方向
454 |           });
455 |           
456 |           lastPrice = price;
457 |           time = new Date(time.getTime() + 15000); // 15-second interval for historical data
458 |         }
459 |         
460 |         // Lunch break (11:30 - 13:00) - no data
461 |         time = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 13, 0, 0);
462 |         
463 |         // Afternoon session (13:00 - 15:00)
464 |         while (time <= marketClose) {
465 |           // Similar logic to morning session
466 |           const targetChange = stock.price - lastPrice;
467 |           const progressRatio = (time.getTime() - new Date(today.getFullYear(), today.getMonth(), today.getDate(), 13, 0, 0).getTime()) / 
468 |                              (marketClose.getTime() - new Date(today.getFullYear(), today.getMonth(), today.getDate(), 13, 0, 0).getTime());
469 |           
470 |           const bias = targetChange * progressRatio * 0.4;
471 |           const randomComponent = (Math.random() - 0.5) * 0.1;
472 |           const change = bias + randomComponent;
473 |           
474 |           price = Math.max(0.01, price + change);
475 |           
476 |           // Calculate volume - higher at close
477 |           let volume = Math.floor(Math.random() * 5000) + 1000;
478 |           
479 |           // Higher volume at market close
480 |           if (marketClose.getTime() - time.getTime() < 15 * 60 * 1000) {
481 |             volume *= 2;
482 |           }
483 |           
484 |           // 确定买卖方向
485 |           let direction;
486 |           if (price > lastPrice) {
487 |             direction = 'buy'; // 价格上涨，买方驱动
488 |           } else if (price < lastPrice) {
489 |             direction = 'sell'; // 价格下跌，卖方驱动
490 |           } else {
491 |             direction = 'neutral'; // 价格不变，中性
492 |           }
493 |           
494 |           data.push({
495 |             time: new Date(time),
496 |             price: price,
497 |             volume: volume,
498 |             direction: direction // 添加买卖方向
499 |           });
500 |           
501 |           lastPrice = price;
502 |           time = new Date(time.getTime() + 15000); // 15-second interval
503 |         }
504 |         
505 |         return data;
506 |       }
507 |       
508 |       generateInitialData(stockCode) {
509 |         const stock = this.stocks[stockCode];
510 |         
511 |         // Generate initial data (last 3 minutes)
512 |         const now = new Date();
513 |         const startTime = new Date(now.getTime() - 3 * 60 * 1000); // 3 minutes ago
514 |         
515 |         const data = [];
516 |         let time = new Date(startTime);
517 |         let price = stock.price - (Math.random() * 0.2 - 0.1); // Start close to current price
518 |         
519 |         //while (time < now) {
520 |           // Random price movement
521 |           const change = (Math.random() - 0.5) * 0.05;
522 |           price = Math.max(0.01, price + change);
523 |           
524 |           // Random volume
525 |           const volume = Math.floor(Math.random() * 2000) + 200;
526 |           
527 |           // 确定买卖方向 - 初始数据随机分配方向
528 |           const directions = ['buy', 'sell', 'neutral'];
529 |           const direction = directions[Math.floor(Math.random() * directions.length)];
530 |           
531 |           data.push({
532 |             time: new Date(time),
533 |             price: price,
534 |             volume: volume,
535 |             direction: direction // 添加买卖方向
536 |           });
537 |           
538 |           // 1-second interval for real-time data
539 |           time = new Date(time.getTime() + 1000);
540 |         //}
541 |         
542 |         // Store the data
543 |         this.realtimeData[stockCode] = data;
544 |         
545 |         // Send initial data to callback
546 |         this.onDataCallback({
547 |           stockCode: stockCode,
548 |           stockInfo: stock,
549 |           data: data,
550 |           isInitialData: true
551 |         });
552 |         
553 |         // Start real-time updates if connected and not paused
554 |         if (this.connected && !this.paused && !this.historicalMode) {
555 |           this.startRealTimeUpdates();
556 |         }
557 |       }
558 |       
559 |       startRealTimeUpdates() {
560 |         // Clear any existing interval
561 |         clearInterval(this.dataInterval);
562 |         
563 |         // Start sending data at regular intervals
564 |         this.dataInterval = setInterval(() => {
565 |           if (!this.connected || this.paused || this.historicalMode) {
566 |             return;
567 |           }
568 |           
569 |           const stock = this.stocks[this.currentStock];
570 |           const lastDataPoint = this.realtimeData[this.currentStock][this.realtimeData[this.currentStock].length - 1];
571 |           
572 |           // Generate new price with small random change
573 |           const change = (Math.random() - 0.5) * 0.05;
574 |           const newPrice = Math.max(0.01, lastDataPoint.price + change);
575 |           
576 |           // Update stock price
577 |           stock.price = newPrice;
578 |           stock.change = ((newPrice - stock.open) / stock.open) * 100;
579 |           
580 |           // New time point (current time)
581 |           const now = new Date();
582 |           
583 |           // Volume with some randomness
584 |           const volume = Math.floor(Math.random() * 1000) + 100;
585 |           
586 |           // 确定买卖方向，根据价格变化
587 |           let direction;
588 |           if (newPrice > lastDataPoint.price) {
589 |             direction = 'buy'; // 价格上涨，买方驱动
590 |           } else if (newPrice < lastDataPoint.price) {
591 |             direction = 'sell'; // 价格下跌，卖方驱动
592 |           } else {
593 |             direction = 'neutral'; // 价格不变，中性
594 |           }
595 |           
596 |           // Create new data point
597 |           const newDataPoint = {
598 |             time: now,
599 |             price: newPrice,
600 |             volume: volume,
601 |             direction: direction // 添加买卖方向
602 |           };
603 |           
604 |           // Add to real-time data store
605 |           this.realtimeData[this.currentStock].push(newDataPoint);
606 |           
607 |           // Limit data points (keep last 10 minutes = 600 points at 1 second interval)
608 |           if (this.realtimeData[this.currentStock].length > 600) {
609 |             this.realtimeData[this.currentStock].shift();
610 |           }
611 |           
612 |           // Send update
613 |           this.onDataCallback({
614 |             stockCode: this.currentStock,
615 |             stockInfo: stock,
616 |             data: [newDataPoint],
617 |             isInitialData: false
618 |           });
619 |         }, 2000); // Update every second
620 |       }
621 |       
622 |       // Get current stock info
623 |       getCurrentStockInfo() {
624 |         return this.stocks[this.currentStock];
625 |       }
626 |       
627 |       // Get all stocks for watchlist
628 |       getAllStocks() {
629 |         return this.stocks;
630 |       }
631 |     }
632 |     
633 |     // Initialize chart and stock data service
634 |     document.addEventListener('DOMContentLoaded', () => {
635 |       // Create chart instance
636 |       const chart = new FenshiChart('chart', {
637 |         height: 600,
638 |         backgroundColor: '#1a1a1a',
639 |         lineColor: '#36a2eb',
640 |         averageColor: '#ffcd56',
641 |         gridColor: '#333',
642 |         textColor: '#aaa',
643 |         upBarColor: '#F44336',  // 涨为红色（同花顺风格）
644 |         downBarColor: '#4CAF50',  // 跌为绿色（同花顺风格）
645 |         averagePeriod: 20,
646 |         showAverage: true
647 |       });
648 |       
649 |       // Initialize UI elements
650 |       const btnRealtime = document.getElementById('btn-realtime');
651 |       const btnHistorical = document.getElementById('btn-historical');
652 |       const btnPause = document.getElementById('btn-pause');
653 |       const statusIndicator = document.getElementById('status-indicator');
654 |       const connectionStatus = document.getElementById('connection-status');
655 |       const dataTimestamp = document.getElementById('data-timestamp');
656 |       const dataCount = document.getElementById('data-count');
657 |       const currentStockTitle = document.getElementById('current-stock-title');
658 |       const currentStockPrice = document.getElementById('current-stock-price');
659 |       const watchlistContainer = document.getElementById('watchlist-container');
660 |       const timeFrames = document.querySelectorAll('.time-frame');
661 |       
662 |       // Data point counter
663 |       let pointCount = 0;
664 |       
665 |       // Handle data updates
666 |       const onDataUpdate = (data) => {
667 |         if (data.isInitialData) {
668 |           // Set initial data
669 |           chart.setInitialData(data.data);
670 |           pointCount = data.data.length;
671 |         } else {
672 |           // Add new data point
673 |           data.data.forEach(point => {
674 |             chart.addData(point);
675 |             pointCount++;
676 |           });
677 |         }
678 |         
679 |         // Update UI elements
680 |         updateStockInfo(data.stockInfo);
681 |         dataCount.textContent = `数据点: ${pointCount}`;
682 |         dataTimestamp.textContent = `最后更新: ${formatTime(new Date())}`;
683 |       };
684 |       
685 |       // Handle connection status changes
686 |       const onConnectionChange = (status) => {
687 |         statusIndicator.className = 'status-indicator ' + status;
688 |         
689 |         switch (status) {
690 |           case 'connected':
691 |             connectionStatus.textContent = '已连接';
692 |             break;
693 |           case 'connecting':
694 |             connectionStatus.textContent = '连接中...';
695 |             break;
696 |           case 'disconnected':
697 |             connectionStatus.textContent = '已断开';
698 |             break;
699 |         }
700 |       };
701 |       
702 |       // Create stock data service
703 |       const stockService = new StockDataService(onDataUpdate, onConnectionChange);
704 |       
705 |       // Update UI with stock info
706 |       const updateStockInfo = (stockInfo) => {
707 |         currentStockTitle.textContent = `${stockInfo.code} - ${stockInfo.name}`;
708 |         
709 |         const changeClass = stockInfo.change >= 0 ? 'price-up' : 'price-down';
710 |         const changeSign = stockInfo.change >= 0 ? '+' : '';
711 |         
712 |         currentStockPrice.innerHTML = `价格: ${stockInfo.price.toFixed(2)} <span class="${changeClass}">${changeSign}${stockInfo.change.toFixed(2)}%</span>`;
713 |       };
714 |       
715 |       // Format time as HH:MM:SS
716 |       const formatTime = (date) => {
717 |         return date.toTimeString().substring(0, 8);
718 |       };
719 |       
720 |       // Populate watchlist
721 |       const populateWatchlist = () => {
722 |         const stocks = stockService.getAllStocks();
723 |         watchlistContainer.innerHTML = '';
724 |         
725 |         Object.values(stocks).forEach(stock => {
726 |           const isActive = stock.code === stockService.currentStock;
727 |           const changeClass = stock.change >= 0 ? 'price-up' : 'price-down';
728 |           const changeSign = stock.change >= 0 ? '+' : '';
729 |           
730 |           const itemElement = document.createElement('div');
731 |           itemElement.className = `watchlist-item${isActive ? ' active' : ''}`;
732 |           itemElement.dataset.code = stock.code;
733 |           
734 |           itemElement.innerHTML = `
735 |             <div class="stock-code">${stock.code}</div>
736 |             <div class="stock-name">${stock.name}</div>
737 |             <div class="price-info">
738 |               <span>${stock.price.toFixed(2)}</span>
739 |               <span class="${changeClass}">${changeSign}${stock.change.toFixed(2)}%</span>
740 |             </div>
741 |           `;
742 |           
743 |           itemElement.addEventListener('click', () => {
744 |             // Set all items as inactive
745 |             document.querySelectorAll('.watchlist-item').forEach(item => {
746 |               item.classList.remove('active');
747 |             });
748 |             
749 |             // Set current item as active
750 |             itemElement.classList.add('active');
751 |             
752 |             // Switch to this stock
753 |             const stockInfo = stockService.switchStock(stock.code);
754 |             if (stockInfo) {
755 |               updateStockInfo(stockInfo);
756 |             }
757 |           });
758 |           
759 |           watchlistContainer.appendChild(itemElement);
760 |         });
761 |       };
762 |       
763 |       // Event listeners for buttons
764 |       btnRealtime.addEventListener('click', () => {
765 |         setActiveButton(btnRealtime);
766 |         stockService.setHistoricalMode(false);
767 |       });
768 |       
769 |       btnHistorical.addEventListener('click', () => {
770 |         setActiveButton(btnHistorical);
771 |         stockService.setHistoricalMode(true);
772 |       });
773 |       
774 |       btnPause.addEventListener('click', () => {
775 |         const isPaused = stockService.togglePause();
776 |         
777 |         if (isPaused) {
778 |           btnPause.textContent = '继续';
779 |         } else {
780 |           btnPause.textContent = '暂停';
781 |         }
782 |       });
783 |       
784 |       // Time frame selection
785 |       timeFrames.forEach(frame => {
786 |         frame.addEventListener('click', () => {
787 |           timeFrames.forEach(f => f.classList.remove('active'));
788 |           frame.classList.add('active');
789 |           
790 |           // In a real app, this would change the data granularity
791 |           // For demo, we'll just log it
792 |           console.log(`Switched to ${frame.dataset.timeframe} timeframe`);
793 |         });
794 |       });
795 |       
796 |       // Helper to set active button
797 |       function setActiveButton(activeBtn) {
798 |         [btnRealtime, btnHistorical].forEach(btn => {
799 |           btn.classList.remove('selected');
800 |         });
801 |         activeBtn.classList.add('selected');
802 |       }
803 |       
804 |       // Update watchlist periodically
805 |       setInterval(() => {
806 |         if (stockService.connected) {
807 |           populateWatchlist();
808 |         }
809 |       }, 1000);
810 |       
811 |       // Initialize
812 |       populateWatchlist();
813 |       stockService.connect();
814 |       
815 |       // Handle window resize
816 |       window.addEventListener('resize', () => {
817 |         chart.resize();
818 |       });
819 |     });
820 |   </script>
821 | </body>
822 | </html> 


--------------------------------------------------------------------------------
/fenshi.js:
--------------------------------------------------------------------------------
   1 | /**
   2 |  * Fenshi.js - Real-time stock chart library
   3 |  * A lightweight library for rendering real-time stock data with second-level updates
   4 |  * 
   5 |  * @author Scott Ban
   6 |  */
   7 | 
   8 | class FenshiChart {
   9 |   constructor(container, options = {}) {
  10 |     this.container = typeof container === 'string' ? document.getElementById(container) : container;
  11 |     if (!this.container) {
  12 |       throw new Error('Container element not found');
  13 |     }
  14 |     
  15 |     // 默认主题颜色配置
  16 |     const themes = {
  17 |       dark: {
  18 |         line: '#36a2eb',
  19 |         average: '#ffcd56',
  20 |         grid: '#333',
  21 |         text: '#ccc',
  22 |         background: '#0e1117',
  23 |         upBar: '#F44336',
  24 |         downBar: '#4CAF50',
  25 |         crosshair: 'rgba(255, 255, 255, 0.5)'
  26 |       },
  27 |       light: {
  28 |         line: '#2196F3',
  29 |         average: '#FF9800',
  30 |         grid: '#e0e0e0',
  31 |         text: '#333',
  32 |         background: '#ffffff',
  33 |         upBar: '#F44336',
  34 |         downBar: '#4CAF50',
  35 |         crosshair: 'rgba(0, 0, 0, 0.3)'
  36 |       }
  37 |     };
  38 |     
  39 |     // 获取当前主题
  40 |     const currentTheme = options.theme || 'dark';
  41 |     const themeColors = themes[currentTheme] || themes.dark;
  42 |     
  43 |     // Default options
  44 |     this.options = {
  45 |       width: options.width || this.container.clientWidth || 800,
  46 |       height: options.height || 400,
  47 |       padding: options.padding || { top: 20, right: 50, bottom: 60, left: 50 },
  48 |       colors: {
  49 |         line: options.lineColor || themeColors.line,
  50 |         average: options.averageColor || themeColors.average, // 均价线颜色
  51 |         grid: options.gridColor || themeColors.grid,
  52 |         text: options.textColor || themeColors.text,
  53 |         background: options.backgroundColor || themeColors.background,
  54 |         upBar: options.upBarColor || themeColors.upBar,  // 涨为红色
  55 |         downBar: options.downBarColor || themeColors.downBar, // 跌为绿色
  56 |         crosshair: options.crosshairColor || themeColors.crosshair // 十字线颜色
  57 |       },
  58 |       theme: currentTheme, // 保存当前主题
  59 |       themes: themes, // 保存所有主题配置
  60 |       showAverage: options.showAverage !== undefined ? options.showAverage : true,
  61 |       averagePeriod: options.averagePeriod || 20, // 不再用于均价线计算
  62 |       animation: options.animation !== undefined ? options.animation : true,
  63 |       timeFormat: options.timeFormat || 'HH:mm:ss',
  64 |       maxDataPoints: options.maxDataPoints || 300,
  65 |       gridLines: options.gridLines || 5,
  66 |       barWidth: options.barWidth || 2,     // 固定柱子宽度为2px
  67 |       barSpacing: options.barSpacing || 1, // 柱子间距固定为1px
  68 |       rightOffset: options.rightOffset || 50, // 右侧留白，确保最新数据不会太靠边
  69 |       enableScroll: options.enableScroll !== undefined ? options.enableScroll : true,
  70 |       showRightPrice: options.showRightPrice !== undefined ? options.showRightPrice : true,
  71 |       scrollPosition: 1.0, // 滚动位置，1.0表示最新数据（右侧），0.0表示最早数据（左侧）
  72 |       showCrosshair: options.showCrosshair !== undefined ? options.showCrosshair : true, // 显示十字线
  73 |       tooltipEnabled: options.tooltipEnabled !== undefined ? options.tooltipEnabled : true, // 显示提示框
  74 |       coordinateType: options.coordinateType || 'normal', // 坐标类型：'normal', 'full', 'limit'
  75 |       limitPercentage: options.limitPercentage || 10, // 涨跌停板百分比，默认10%
  76 |       timeAxisHeight: options.timeAxisHeight || 30, // 时间轴高度
  77 |       maxTimeLabels: options.maxTimeLabels || 8, // 时间轴上最多显示的标签数量
  78 |       infoBarEnabled: options.infoBarEnabled !== undefined ? options.infoBarEnabled : true, // 控制信息面板显示
  79 |       initialPrice: options.initialPrice !== undefined ? parseFloat(options.initialPrice) : null, // 初始价格设置，方便涨停板模式参考
  80 |     };
  81 |     
  82 |     // Data
  83 |     this.data = [];
  84 |     this.averageData = []; // 均价线数据
  85 |     this.volumeData = [];
  86 |     
  87 |     // 用于计算均价线的累计数据
  88 |     this.cumulativeVolumeData = [];
  89 |     this.cumulativeAmountData = [];
  90 |     
  91 |     // State
  92 |     this.yRange = { min: 0, max: 0 };
  93 |     this.xRange = { min: 0, max: 0 };
  94 |     this.volumeRange = { min: 0, max: 0 };
  95 |     this.priceInfo = {
  96 |       current: 0,
  97 |       open: 0,
  98 |       high: 0,
  99 |       low: 0,
 100 |       change: 0,
 101 |       changePercent: 0,
 102 |       avgPrice: 0, // 当前均价
 103 |     };
 104 |     
 105 |     // 滚动相关变量
 106 |     this.isDragging = false;
 107 |     this.dragStartX = 0;
 108 |     this.scrollOffsetX = 0;
 109 |     this.prevTouchX = 0;
 110 |     this.touchIdentifier = null;
 111 |     
 112 |     // 鼠标悬停相关
 113 |     this.mousePosition = { x: 0, y: 0 };
 114 |     this.isMouseOver = false;
 115 |     this.hoveredDataIndex = -1;
 116 |     this.tooltip = null;
 117 |     
 118 |     this.init();
 119 |   }
 120 |   
 121 |   init() {
 122 |     // 创建主画布
 123 |     this.canvas = document.createElement('canvas');
 124 |     this.canvas.width = this.options.width;
 125 |     this.canvas.height = this.options.height;
 126 |     this.canvas.style.display = 'block';
 127 |     this.canvas.style.width = '100%';
 128 |     this.canvas.style.maxWidth = '100%';
 129 |     this.ctx = this.canvas.getContext('2d');
 130 |     
 131 |     // 创建成交量画布
 132 |     this.volumeHeight = Math.floor(this.options.height * 0.2);
 133 |     this.volumeCanvas = document.createElement('canvas');
 134 |     this.volumeCanvas.width = this.options.width;
 135 |     this.volumeCanvas.height = this.volumeHeight;
 136 |     this.volumeCanvas.style.display = 'block';
 137 |     this.volumeCanvas.style.marginTop = '5px';
 138 |     this.volumeCanvas.style.width = '100%';
 139 |     this.volumeCanvas.style.maxWidth = '100%';
 140 |     this.volumeCtx = this.volumeCanvas.getContext('2d');
 141 |     
 142 |     // 创建时间轴画布
 143 |     this.timeAxisCanvas = document.createElement('canvas');
 144 |     this.timeAxisCanvas.width = this.options.width;
 145 |     this.timeAxisCanvas.height = this.options.timeAxisHeight;
 146 |     this.timeAxisCanvas.style.display = 'block';
 147 |     this.timeAxisCanvas.style.marginTop = '1px';
 148 |     this.timeAxisCanvas.style.width = '100%';
 149 |     this.timeAxisCanvas.style.maxWidth = '100%';
 150 |     this.timeAxisCtx = this.timeAxisCanvas.getContext('2d');
 151 |     
 152 |     // 创建信息面板
 153 |     this.infoPanel = document.createElement('div');
 154 |     this.infoPanel.style.marginBottom = '10px'; // 改为底部边距
 155 |     this.infoPanel.style.fontSize = '12px';
 156 |     this.infoPanel.style.lineHeight = '1.4';
 157 |     this.infoPanel.style.color = this.options.colors.text;
 158 |     
 159 |     // 创建容器
 160 |     this.chartContainer = document.createElement('div');
 161 |     this.chartContainer.style.position = 'relative';
 162 |     this.chartContainer.style.width = '100%';
 163 |     this.chartContainer.style.boxSizing = 'border-box';
 164 |     this.chartContainer.style.overflow = 'hidden';
 165 |     this.chartContainer.appendChild(this.infoPanel);   // 信息面板放在顶部
 166 |     this.chartContainer.appendChild(this.canvas);
 167 |     this.chartContainer.appendChild(this.volumeCanvas);
 168 |     this.chartContainer.appendChild(this.timeAxisCanvas); // 时间轴放在最下方
 169 |     
 170 |     // 主题相关样式
 171 |     this.applyThemeStyles();
 172 |     
 173 |     // 创建工具提示元素
 174 |     this.createTooltip();
 175 |     
 176 |     this.container.appendChild(this.chartContainer);
 177 |     
 178 |     // 设置信息面板的可见性
 179 |     this.infoPanel.style.display = this.options.infoBarEnabled !== false ? 'block' : 'none';
 180 |     
 181 |     // 监听窗口大小变化
 182 |     window.addEventListener('resize', this.handleResize.bind(this));
 183 |     
 184 |     // 初始化尺寸
 185 |     this.handleResize();
 186 |     
 187 |     // 如果启用滚动，设置滚动事件监听
 188 |     if (this.options.enableScroll) {
 189 |       this.setupScrollEvents();
 190 |     }
 191 |     
 192 |     // 添加鼠标事件监听器
 193 |     this.setupMouseEvents();
 194 |   }
 195 |   
 196 |   // 处理窗口大小变化
 197 |   handleResize() {
 198 |     // 获取容器真实宽度
 199 |     const containerWidth = this.container.clientWidth;
 200 |     
 201 |     // 如果宽度变化了，需要更新canvas大小
 202 |     if (containerWidth !== this.options.width) {
 203 |       this.resize(containerWidth);
 204 |     }
 205 |   }
 206 |   
 207 |   // 修改resize方法以适应新的时间轴
 208 |   resize(width, height) {
 209 |     const newWidth = width || this.container.clientWidth;
 210 |     const newHeight = height || this.options.height;
 211 |     
 212 |     this.options.width = newWidth;
 213 |     this.options.height = newHeight;
 214 |     
 215 |     // 更新canvas尺寸
 216 |     this.canvas.width = newWidth;
 217 |     this.canvas.height = newHeight;
 218 |     
 219 |     this.volumeHeight = Math.floor(newHeight * 0.2);
 220 |     this.volumeCanvas.width = newWidth;
 221 |     this.volumeCanvas.height = this.volumeHeight;
 222 |     
 223 |     this.timeAxisCanvas.width = newWidth;
 224 |     this.timeAxisCanvas.height = this.options.timeAxisHeight;
 225 |     
 226 |     // 重新计算滚动位置
 227 |     const chartWidth = newWidth - this.options.padding.left - this.options.padding.right;
 228 |     const totalWidth = this.getFixedWidthChartWidth();
 229 |     
 230 |     if (totalWidth > chartWidth) {
 231 |       const maxScroll = totalWidth - chartWidth;
 232 |       this.scrollOffsetX = maxScroll * (1 - this.options.scrollPosition);
 233 |     } else {
 234 |       this.scrollOffsetX = 0;
 235 |     }
 236 |     
 237 |     // 重新渲染
 238 |     this.render();
 239 |   }
 240 |   
 241 |   // 应用主题相关样式
 242 |   applyThemeStyles() {
 243 |     this.chartContainer.style.backgroundColor = this.options.colors.background;
 244 |     this.infoPanel.style.color = this.options.colors.text;
 245 |     this.timeAxisCanvas.style.backgroundColor = this.options.colors.background;
 246 |     
 247 |     if (this.tooltip) {
 248 |       // 亮色主题需要更深的背景色以确保可读性
 249 |       if (this.options.theme === 'light') {
 250 |         this.tooltip.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
 251 |         this.tooltip.style.color = '#fff';
 252 |       } else {
 253 |         this.tooltip.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
 254 |         this.tooltip.style.color = '#fff';
 255 |       }
 256 |     }
 257 |   }
 258 |   
 259 |   // 切换主题
 260 |   switchTheme(theme) {
 261 |     if (theme !== 'dark' && theme !== 'light') {
 262 |       console.warn('Invalid theme. Using dark theme as default.');
 263 |       theme = 'dark';
 264 |     }
 265 |     
 266 |     // 更新主题
 267 |     this.options.theme = theme;
 268 |     
 269 |     // 获取主题颜色
 270 |     const themeColors = this.options.themes[theme];
 271 |     
 272 |     // 更新颜色配置
 273 |     this.options.colors = {
 274 |       ...this.options.colors,
 275 |       line: themeColors.line,
 276 |       average: themeColors.average,
 277 |       grid: themeColors.grid,
 278 |       text: themeColors.text,
 279 |       background: themeColors.background,
 280 |       crosshair: themeColors.crosshair
 281 |       // 不更新上涨/下跌颜色，保持红涨绿跌
 282 |     };
 283 |     
 284 |     // 应用主题样式
 285 |     this.applyThemeStyles();
 286 |     
 287 |     // 重新渲染
 288 |     this.render();
 289 |   }
 290 |   
 291 |   // 设置滚动事件
 292 |   setupScrollEvents() {
 293 |     // 鼠标拖动
 294 |     this.canvas.addEventListener('mousedown', this.handleMouseDown.bind(this));
 295 |     document.addEventListener('mousemove', this.handleMouseMove.bind(this));
 296 |     document.addEventListener('mouseup', this.handleMouseUp.bind(this));
 297 |     
 298 |     // 为时间轴也添加拖动事件
 299 |     this.timeAxisCanvas.addEventListener('mousedown', this.handleMouseDown.bind(this));
 300 |     
 301 |     // 触摸事件
 302 |     this.canvas.addEventListener('touchstart', this.handleTouchStart.bind(this));
 303 |     this.timeAxisCanvas.addEventListener('touchstart', this.handleTouchStart.bind(this));
 304 |     document.addEventListener('touchmove', this.handleTouchMove.bind(this));
 305 |     document.addEventListener('touchend', this.handleTouchEnd.bind(this));
 306 |     document.addEventListener('touchcancel', this.handleTouchEnd.bind(this));
 307 |     
 308 |     // 鼠标滚轮
 309 |     this.canvas.addEventListener('wheel', this.handleWheel.bind(this));
 310 |     this.volumeCanvas.addEventListener('wheel', this.handleWheel.bind(this));
 311 |     this.timeAxisCanvas.addEventListener('wheel', this.handleWheel.bind(this));
 312 |   }
 313 |   
 314 |   // 鼠标事件处理
 315 |   handleMouseDown(e) {
 316 |     this.isDragging = true;
 317 |     this.dragStartX = e.clientX;
 318 |     this.canvas.style.cursor = 'grabbing';
 319 |     e.preventDefault();
 320 |   }
 321 |   
 322 |   handleMouseMove(e) {
 323 |     // 保存鼠标位置
 324 |     const rect = this.canvas.getBoundingClientRect();
 325 |     this.mousePosition = {
 326 |       x: e.clientX - rect.left,
 327 |       y: e.clientY - rect.top
 328 |     };
 329 |     
 330 |     // 如果正在拖动，处理滚动逻辑
 331 |     if (this.isDragging) {
 332 |       const dx = e.clientX - this.dragStartX;
 333 |       this.dragStartX = e.clientX;
 334 |       
 335 |       this.updateScroll(dx);
 336 |       e.preventDefault();
 337 |       return; // 拖动时不显示十字线
 338 |     }
 339 |     
 340 |     // 如果没有拖动，则处理十字线
 341 |     this.updateHoveredDataIndex();
 342 |     
 343 |     // 仅当悬停状态改变时才重新渲染
 344 |     if (this.options.showCrosshair && this.hoveredDataIndex >= 0) {
 345 |       this.render();
 346 |       
 347 |       // 更新并显示提示框
 348 |       if (this.options.tooltipEnabled) {
 349 |         this.updateTooltip();
 350 |       }
 351 |     } else if (this.tooltip) {
 352 |       // 如果鼠标不在数据点上，隐藏提示框
 353 |       this.hideTooltip();
 354 |       this.render(); // 重绘清除十字线
 355 |     }
 356 |   }
 357 |   
 358 |   handleMouseUp(e) {
 359 |     this.isDragging = false;
 360 |     this.canvas.style.cursor = 'grab';
 361 |   }
 362 |   
 363 |   // 触摸事件处理
 364 |   handleTouchStart(e) {
 365 |     if (e.touches.length === 1) {
 366 |       const touch = e.touches[0];
 367 |       this.touchIdentifier = touch.identifier;
 368 |       this.prevTouchX = touch.clientX;
 369 |       e.preventDefault();
 370 |     }
 371 |   }
 372 |   
 373 |   handleTouchMove(e) {
 374 |     if (this.touchIdentifier === null) return;
 375 |     
 376 |     for (let i = 0; i < e.changedTouches.length; i++) {
 377 |       const touch = e.changedTouches[i];
 378 |       if (touch.identifier === this.touchIdentifier) {
 379 |         const dx = touch.clientX - this.prevTouchX;
 380 |         this.prevTouchX = touch.clientX;
 381 |         this.updateScroll(dx);
 382 |         e.preventDefault();
 383 |         break;
 384 |       }
 385 |     }
 386 |   }
 387 |   
 388 |   handleTouchEnd(e) {
 389 |     for (let i = 0; i < e.changedTouches.length; i++) {
 390 |       if (e.changedTouches[i].identifier === this.touchIdentifier) {
 391 |         this.touchIdentifier = null;
 392 |         break;
 393 |       }
 394 |     }
 395 |   }
 396 |   
 397 |   // 滚轮事件处理，确保时间轴也能被操作
 398 |   handleWheel(e) {
 399 |     // 只处理水平滚动或滚轮事件
 400 |     if (e.deltaX !== 0) {
 401 |       e.preventDefault();
 402 |       this.updateScroll(e.deltaX);
 403 |     } else if (e.deltaY !== 0 && (e.shiftKey || e.target === this.timeAxisCanvas)) {
 404 |       // 当按住Shift键时或直接在时间轴上滚动时，垂直滚动转为水平滚动
 405 |       e.preventDefault();
 406 |       this.updateScroll(e.deltaY);
 407 |     }
 408 |     // 其他情况不阻止默认行为，允许页面正常滚动
 409 |   }
 410 |   
 411 |   // 更新滚动位置
 412 |   updateScroll(dx) {
 413 |     const chartWidth = this.options.width - this.options.padding.left - this.options.padding.right;
 414 |     const totalWidth = this.getFixedWidthChartWidth();
 415 |     
 416 |     if (totalWidth <= chartWidth) return; // 如果数据很少，不需要滚动
 417 |     
 418 |     // 计算新的滚动偏移
 419 |     this.scrollOffsetX += dx;
 420 |     
 421 |     // 限制滚动范围
 422 |     const maxScroll = totalWidth - chartWidth;
 423 |     this.scrollOffsetX = Math.max(0, Math.min(this.scrollOffsetX, maxScroll));
 424 |     
 425 |     // 更新滚动位置百分比
 426 |     this.options.scrollPosition = 1 - (this.scrollOffsetX / maxScroll);
 427 |     
 428 |     // 重新渲染
 429 |     this.render();
 430 |   }
 431 |   
 432 |   // 设置滚动位置
 433 |   setScrollPosition(position) {
 434 |     // position: 0.0 - 1.0 (0 = 最左侧, 1 = 最右侧)
 435 |     position = Math.max(0, Math.min(1, position));
 436 |     this.options.scrollPosition = position;
 437 |     
 438 |     const chartWidth = this.options.width - this.options.padding.left - this.options.padding.right;
 439 |     const totalWidth = this.getFixedWidthChartWidth();
 440 |     
 441 |     if (totalWidth > chartWidth) {
 442 |       const maxScroll = totalWidth - chartWidth;
 443 |       this.scrollOffsetX = maxScroll * (1 - position);
 444 |       this.render();
 445 |     }
 446 |   }
 447 |   
 448 |   // Data handling methods
 449 |   setInitialData(data) {
 450 |     this.data = data.map(d => ({
 451 |       time: new Date(d.time),
 452 |       price: parseFloat(d.price),
 453 |       volume: parseInt(d.volume, 10),
 454 |       direction: d.direction || 'neutral' // 买卖方向，默认为neutral
 455 |     }));
 456 |     
 457 |     if (this.data.length > 0) {
 458 |       // Use initialPrice as open price if it's provided, otherwise use first data point price
 459 |       if (this.options.initialPrice !== null) {
 460 |         this.priceInfo.open = this.options.initialPrice;
 461 |       } else {
 462 |         this.priceInfo.open = this.data[0].price;
 463 |       }
 464 |       
 465 |       this.calculateStats();
 466 |       this.calculateAverages();
 467 |       
 468 |       // 重置滚动位置到最新数据
 469 |       this.scrollOffsetX = 0;
 470 |       this.options.scrollPosition = 1.0;
 471 |       
 472 |       this.render();
 473 |     }
 474 |   }
 475 |   
 476 |   addData(newData) {
 477 |     // Add new data point
 478 |     const dataPoint = {
 479 |       time: new Date(newData.time),
 480 |       price: parseFloat(newData.price),
 481 |       volume: parseInt(newData.volume, 10),
 482 |       direction: newData.direction || 'neutral' // 买卖方向，默认为neutral
 483 |     };
 484 |     
 485 |     this.data.push(dataPoint);
 486 |     
 487 |     // Limit data points
 488 |     if (this.data.length > this.options.maxDataPoints) {
 489 |       this.data.shift();
 490 |     }
 491 |     
 492 |     this.calculateStats();
 493 |     this.calculateAverages();
 494 |     
 495 |     // 如果滚动位置是最新的，则保持滚动位置在最右侧
 496 |     if (this.options.scrollPosition >= 0.99) {
 497 |       this.scrollOffsetX = 0;
 498 |       this.options.scrollPosition = 1.0;
 499 |     } else {
 500 |       // 否则维持当前的滚动偏移位置，但更新滚动位置百分比
 501 |       const chartWidth = this.options.width - this.options.padding.left - this.options.padding.right;
 502 |       const totalWidth = this.getFixedWidthChartWidth();
 503 |       const maxScroll = totalWidth - chartWidth;
 504 |       
 505 |       if (maxScroll > 0) {
 506 |         this.options.scrollPosition = 1 - (this.scrollOffsetX / maxScroll);
 507 |       }
 508 |     }
 509 |     
 510 |     this.render();
 511 |   }
 512 |   
 513 |   calculateStats() {
 514 |     if (this.data.length === 0) return;
 515 |     
 516 |     // Find min/max values
 517 |     this.priceInfo.current = this.data[this.data.length - 1].price;
 518 |     this.priceInfo.high = Math.max(...this.data.map(d => d.price));
 519 |     this.priceInfo.low = Math.min(...this.data.map(d => d.price));
 520 |     this.priceInfo.change = this.priceInfo.current - this.priceInfo.open;
 521 |     this.priceInfo.changePercent = (this.priceInfo.change / this.priceInfo.open) * 100;
 522 |     
 523 |     // 根据坐标类型计算价格范围
 524 |     this.calculatePriceRange();
 525 |     
 526 |     // Volume range
 527 |     this.volumeData = this.data.map(d => d.volume);
 528 |     this.volumeRange.max = Math.max(...this.volumeData);
 529 |     this.volumeRange.min = 0;
 530 |     
 531 |     // Time range
 532 |     this.xRange.min = this.data[0].time.getTime();
 533 |     this.xRange.max = this.data[this.data.length - 1].time.getTime();
 534 |     
 535 |     // Update info panel
 536 |     this.updateInfoPanel();
 537 |   }
 538 |   
 539 |   // 根据坐标类型计算价格范围
 540 |   calculatePriceRange() {
 541 |     const coordinateType = this.options.coordinateType;
 542 |     
 543 |     switch (coordinateType) {
 544 |       case 'normal': // 普通坐标 - 根据数据动态调整，带有一定padding
 545 |         const priceRange = this.priceInfo.high - this.priceInfo.low;
 546 |         const padding = priceRange * 0.1;
 547 |         this.yRange.min = this.priceInfo.low - padding;
 548 |         this.yRange.max = this.priceInfo.high + padding;
 549 |         break;
 550 |         
 551 |       case 'full': // 满占坐标 - 使用最大和最小值，没有padding
 552 |         this.yRange.min = this.priceInfo.low;
 553 |         this.yRange.max = this.priceInfo.high;
 554 |         break;
 555 |         
 556 |       case 'limit': // 涨停板坐标 - 基于初始价格或开盘价和涨跌停百分比
 557 |         const limitPercent = this.options.limitPercentage / 100;
 558 |         // 优先使用initialPrice作为基准价格计算涨跌停，如果未设置则使用开盘价
 559 |         const referencePrice = this.options.initialPrice !== null ? this.options.initialPrice : this.priceInfo.open;
 560 |         this.yRange.min = referencePrice * (1 - limitPercent);
 561 |         this.yRange.max = referencePrice * (1 + limitPercent);
 562 |         break;
 563 |         
 564 |       default:
 565 |         // 默认使用普通坐标
 566 |         const defaultRange = this.priceInfo.high - this.priceInfo.low;
 567 |         const defaultPadding = defaultRange * 0.1;
 568 |         this.yRange.min = this.priceInfo.low - defaultPadding;
 569 |         this.yRange.max = this.priceInfo.high + defaultPadding;
 570 |     }
 571 |     
 572 |     // 确保最小价格不为负数
 573 |     if (this.yRange.min < 0) {
 574 |       this.yRange.min = 0;
 575 |     }
 576 |   }
 577 |   
 578 |   calculateAverages() {
 579 |     if (!this.options.showAverage || this.data.length === 0) {
 580 |       this.averageData = [];
 581 |       return;
 582 |     }
 583 |     
 584 |     // 重置累计数据
 585 |     this.cumulativeVolumeData = [];
 586 |     this.cumulativeAmountData = [];
 587 |     this.averageData = [];
 588 |     
 589 |     let totalVolume = 0;
 590 |     let totalAmount = 0;
 591 |     
 592 |     // 计算每个点的累计成交量和成交金额，以及对应的均价
 593 |     for (let i = 0; i < this.data.length; i++) {
 594 |       const dataPoint = this.data[i];
 595 |       const volume = dataPoint.volume;
 596 |       const amount = dataPoint.price * volume;
 597 |       
 598 |       totalVolume += volume;
 599 |       totalAmount += amount;
 600 |       
 601 |       this.cumulativeVolumeData.push(totalVolume);
 602 |       this.cumulativeAmountData.push(totalAmount);
 603 |       
 604 |       // 计算均价 = 累计成交金额 / 累计成交量
 605 |       const avgPrice = totalVolume > 0 ? totalAmount / totalVolume : dataPoint.price;
 606 |       this.averageData.push(avgPrice);
 607 |     }
 608 |     
 609 |     // 更新当前均价
 610 |     if (this.data.length > 0) {
 611 |       this.priceInfo.avgPrice = this.averageData[this.averageData.length - 1];
 612 |     }
 613 |   }
 614 |   
 615 |   updateInfoPanel() {
 616 |     const changeSign = this.priceInfo.change >= 0 ? '+' : '';
 617 |     const changeColor = this.priceInfo.change >= 0 ? this.options.colors.upBar : this.options.colors.downBar;
 618 |     
 619 |     this.infoPanel.innerHTML = `
 620 |       <div style="display: flex; justify-content: space-between;">
 621 |         <div>当前价: <span style="font-weight: bold;">${this.priceInfo.current.toFixed(2)}</span></div>
 622 |         <div>涨跌幅: <span style="color: ${changeColor}; font-weight: bold;">${changeSign}${this.priceInfo.change.toFixed(2)} (${changeSign}${this.priceInfo.changePercent.toFixed(2)}%)</span></div>
 623 |         <div>成交量: ${this.formatNumber(this.data[this.data.length - 1].volume)}</div>
 624 |       </div>
 625 |       <div style="display: flex; justify-content: space-between; margin-top: 5px;">
 626 |         <div>开盘价: ${this.priceInfo.open.toFixed(2)}</div>
 627 |         <div>均价: <span style="color: ${this.options.colors.average}; font-weight: bold;">${this.priceInfo.avgPrice.toFixed(2)}</span></div>
 628 |         <div>最高价: ${this.priceInfo.high.toFixed(2)}</div>
 629 |         <div>最低价: ${this.priceInfo.low.toFixed(2)}</div>
 630 |       </div>
 631 |     `;
 632 |   }
 633 |   
 634 |   // Rendering methods
 635 |   render() {
 636 |     this.clear();
 637 |     this.drawGrid();
 638 |     this.drawTimeLabels(); // 绘制垂直网格线
 639 |     this.drawPriceChart();
 640 |     this.drawVolumeChart();
 641 |     this.drawTimeAxis(); // 绘制独立的时间轴
 642 |     
 643 |     if (this.options.showAverage && this.averageData.length > 0) {
 644 |       this.drawAverageLine();
 645 |     }
 646 |     
 647 |     // 绘制十字线
 648 |     if (this.options.showCrosshair && this.isMouseOver && this.hoveredDataIndex >= 0) {
 649 |       this.drawCrosshair();
 650 |     }
 651 |   }
 652 |   
 653 |   clear() {
 654 |     this.ctx.fillStyle = this.options.colors.background;
 655 |     this.ctx.fillRect(0, 0, this.options.width, this.options.height);
 656 |     
 657 |     this.volumeCtx.fillStyle = this.options.colors.background;
 658 |     this.volumeCtx.fillRect(0, 0, this.options.width, this.volumeHeight);
 659 |     
 660 |     this.timeAxisCtx.fillStyle = this.options.colors.background;
 661 |     this.timeAxisCtx.fillRect(0, 0, this.options.width, this.options.timeAxisHeight);
 662 |   }
 663 |   
 664 |   drawGrid() {
 665 |     const priceChartHeight = this.options.height - this.options.padding.top - this.options.padding.bottom;
 666 |     const chartWidth = this.options.width - this.options.padding.left - this.options.padding.right;
 667 |     
 668 |     // Draw horizontal grid lines for price chart
 669 |     this.ctx.strokeStyle = this.options.colors.grid;
 670 |     this.ctx.lineWidth = 0.5;
 671 |     this.ctx.setLineDash([5, 5]);
 672 |     
 673 |     const priceStep = (this.yRange.max - this.yRange.min) / this.options.gridLines;
 674 |     
 675 |     for (let i = 0; i <= this.options.gridLines; i++) {
 676 |       const price = this.yRange.max - (i * priceStep);
 677 |       const y = this.mapPriceToY(price);
 678 |       
 679 |       this.ctx.beginPath();
 680 |       this.ctx.moveTo(this.options.padding.left, y);
 681 |       this.ctx.lineTo(this.options.width - this.options.padding.right, y);
 682 |       this.ctx.stroke();
 683 |       
 684 |       // 左侧价格标签
 685 |       this.ctx.fillStyle = this.options.colors.text;
 686 |       this.ctx.font = '10px Arial';
 687 |       this.ctx.textAlign = 'right';
 688 |       this.ctx.textBaseline = 'middle';
 689 |       this.ctx.fillText(price.toFixed(2), this.options.padding.left - 5, y);
 690 |       
 691 |       // 添加右侧价格标签
 692 |       if (this.options.showRightPrice) {
 693 |         // 计算涨跌幅
 694 |         const changePercent = ((price - this.priceInfo.open) / this.priceInfo.open) * 100;
 695 |         const changeSign = changePercent >= 0 ? '+' : '';
 696 |         const changeText = `${changeSign}${changePercent.toFixed(2)}%`;
 697 |         
 698 |         // 设置颜色 - 符合同花顺配色方案
 699 |         const isPositive = changePercent >= 0;
 700 |         this.ctx.fillStyle = isPositive ? this.options.colors.upBar : this.options.colors.downBar;
 701 |         
 702 |         // 绘制右侧涨跌幅
 703 |         this.ctx.textAlign = 'left';
 704 |         this.ctx.fillText(changeText, this.options.width - this.options.padding.right + 5, y);
 705 |       }
 706 |     }
 707 |     
 708 |     // 涨停板坐标系额外标记：开盘价、涨停价、跌停价
 709 |     if (this.options.coordinateType === 'limit') {
 710 |       const limitPercent = this.options.limitPercentage / 100;
 711 |       const openPrice = this.priceInfo.open;
 712 |       const upperLimit = openPrice * (1 + limitPercent);
 713 |       const lowerLimit = openPrice * (1 - limitPercent);
 714 |       
 715 |       // 标记开盘价/参考价 - 虚线
 716 |       const openY = this.mapPriceToY(openPrice);
 717 |       this.ctx.beginPath();
 718 |       this.ctx.strokeStyle = this.options.colors.text;
 719 |       this.ctx.setLineDash([2, 2]);
 720 |       this.ctx.moveTo(this.options.padding.left, openY);
 721 |       this.ctx.lineTo(this.options.width - this.options.padding.right, openY);
 722 |       this.ctx.stroke();
 723 |       
 724 |       // 在左侧标记参考价文字
 725 |       this.ctx.fillStyle = this.options.colors.text;
 726 |       this.ctx.textAlign = 'right';
 727 |     //   this.ctx.fillText(`参考价 ${openPrice.toFixed(2)}`, this.options.padding.left - 5, openY - 5);
 728 |       
 729 |       // 标记涨停价 - 红色虚线
 730 |       const upperY = this.mapPriceToY(upperLimit);
 731 |       this.ctx.beginPath();
 732 |       this.ctx.strokeStyle = this.options.colors.upBar;
 733 |       this.ctx.setLineDash([2, 2]);
 734 |       this.ctx.moveTo(this.options.padding.left, upperY);
 735 |       this.ctx.lineTo(this.options.width - this.options.padding.right, upperY);
 736 |       this.ctx.stroke();
 737 |       
 738 |       // 在左侧标记涨停文字
 739 |       this.ctx.fillStyle = this.options.colors.upBar;
 740 |       this.ctx.textAlign = 'right';
 741 |     //   this.ctx.fillText(`涨停 ${upperLimit.toFixed(2)}`, this.options.padding.left - 5, upperY - 5);
 742 |       
 743 |       // 标记跌停价 - 绿色虚线
 744 |       const lowerY = this.mapPriceToY(lowerLimit);
 745 |       this.ctx.beginPath();
 746 |       this.ctx.strokeStyle = this.options.colors.downBar;
 747 |       this.ctx.setLineDash([2, 2]);
 748 |       this.ctx.moveTo(this.options.padding.left, lowerY);
 749 |       this.ctx.lineTo(this.options.width - this.options.padding.right, lowerY);
 750 |       this.ctx.stroke();
 751 |       
 752 |       // 在左侧标记跌停文字
 753 |       this.ctx.fillStyle = this.options.colors.downBar;
 754 |       this.ctx.textAlign = 'right';
 755 |     //   this.ctx.fillText(`跌停 ${lowerLimit.toFixed(2)}`, this.options.padding.left - 5, lowerY + 10);
 756 |     }
 757 |     
 758 |     // Reset line dash
 759 |     this.ctx.setLineDash([]);
 760 |   }
 761 |   
 762 |   drawPriceChart() {
 763 |     if (this.data.length < 2) return;
 764 |     
 765 |     // 获取可见的数据点
 766 |     const visibleIndices = this.getVisibleDataIndices();
 767 |     const firstVisibleIndex = visibleIndices.first;
 768 |     const lastVisibleIndex = visibleIndices.last;
 769 |     
 770 |     this.ctx.strokeStyle = this.options.colors.line;
 771 |     this.ctx.lineWidth = 1.5;
 772 |     this.ctx.beginPath();
 773 |     
 774 |     let started = false;
 775 |     
 776 |     for (let i = firstVisibleIndex; i <= lastVisibleIndex; i++) {
 777 |       const x = this.getDataPointScreenX(i);
 778 |       const y = this.mapPriceToY(this.data[i].price);
 779 |       
 780 |       if (!started) {
 781 |         this.ctx.moveTo(x, y);
 782 |         started = true;
 783 |       } else {
 784 |         this.ctx.lineTo(x, y);
 785 |       }
 786 |     }
 787 |     
 788 |     this.ctx.stroke();
 789 |     
 790 |     // 绘制价格线下方的区域填充
 791 |     if (started) {
 792 |       const lastVisibleX = this.getDataPointScreenX(lastVisibleIndex);
 793 |       const firstVisibleX = this.getDataPointScreenX(firstVisibleIndex);
 794 |       
 795 |       this.ctx.lineTo(lastVisibleX, this.mapPriceToY(this.yRange.min));
 796 |       this.ctx.lineTo(firstVisibleX, this.mapPriceToY(this.yRange.min));
 797 |       this.ctx.closePath();
 798 |       
 799 |       const gradient = this.ctx.createLinearGradient(0, this.options.padding.top, 0, this.options.height - this.options.padding.bottom);
 800 |       gradient.addColorStop(0, 'rgba(54, 162, 235, 0.2)');
 801 |       gradient.addColorStop(1, 'rgba(54, 162, 235, 0)');
 802 |       
 803 |       this.ctx.fillStyle = gradient;
 804 |       this.ctx.fill();
 805 |     }
 806 |   }
 807 |   
 808 |   drawAverageLine() {
 809 |     if (this.data.length < 2) return;
 810 |     
 811 |     // 获取可见的数据点
 812 |     const visibleIndices = this.getVisibleDataIndices();
 813 |     const firstVisibleIndex = visibleIndices.first;
 814 |     const lastVisibleIndex = visibleIndices.last;
 815 |     
 816 |     this.ctx.strokeStyle = this.options.colors.average;
 817 |     this.ctx.lineWidth = 1.5;
 818 |     this.ctx.beginPath();
 819 |     
 820 |     let started = false;
 821 |     
 822 |     for (let i = firstVisibleIndex; i <= lastVisibleIndex; i++) {
 823 |       if (this.averageData[i] === null) continue;
 824 |       
 825 |       const x = this.getDataPointScreenX(i);
 826 |       const y = this.mapPriceToY(this.averageData[i]);
 827 |       
 828 |       if (!started) {
 829 |         this.ctx.moveTo(x, y);
 830 |         started = true;
 831 |       } else {
 832 |         this.ctx.lineTo(x, y);
 833 |       }
 834 |     }
 835 |     
 836 |     this.ctx.stroke();
 837 |   }
 838 |   
 839 |   drawVolumeChart() {
 840 |     if (this.data.length === 0) return;
 841 |     
 842 |     // 获取可见的数据点
 843 |     const visibleIndices = this.getVisibleDataIndices();
 844 |     const firstVisibleIndex = visibleIndices.first;
 845 |     const lastVisibleIndex = visibleIndices.last;
 846 |     
 847 |     const barWidth = this.options.barWidth;
 848 |     
 849 |     // 定义中性柱子颜色（根据主题）
 850 |     const neutralColor = this.options.theme === 'dark' ? 'white' : '#D4A017'; // 棕黄色
 851 |     
 852 |     for (let i = firstVisibleIndex; i <= lastVisibleIndex; i++) {
 853 |       const dataPoint = this.data[i];
 854 |       
 855 |       // 获取屏幕X坐标
 856 |       const x = this.getDataPointScreenX(i) - (barWidth / 2);
 857 |       
 858 |       // 根据买卖方向确定柱子颜色
 859 |       if (dataPoint.direction === 'buy') {
 860 |         this.volumeCtx.fillStyle = this.options.colors.upBar; // 买入用红色
 861 |       } else if (dataPoint.direction === 'sell') {
 862 |         this.volumeCtx.fillStyle = this.options.colors.downBar; // 卖出用绿色
 863 |       } else {
 864 |         // neutral或未指定，根据主题设置
 865 |         this.volumeCtx.fillStyle = neutralColor;
 866 |       }
 867 |       
 868 |       // 计算柱子高度
 869 |       const barHeight = this.mapVolumeToHeight(dataPoint.volume);
 870 |       const y = this.volumeHeight - barHeight;
 871 |       
 872 |       // 绘制成交量柱状图
 873 |       this.volumeCtx.fillRect(x, y, barWidth, barHeight);
 874 |     }
 875 |     
 876 |     // 成交量刻度显示
 877 |     this.volumeCtx.fillStyle = this.options.colors.text;
 878 |     this.volumeCtx.font = '10px Arial';
 879 |     this.volumeCtx.textAlign = 'left';
 880 |     this.volumeCtx.textBaseline = 'middle';
 881 |     this.volumeCtx.fillText(
 882 |       this.formatNumber(this.volumeRange.max), 
 883 |       this.options.width - this.options.padding.right + 5, 
 884 |       5
 885 |     );
 886 |     this.volumeCtx.fillText(
 887 |       '0', 
 888 |       this.options.width - this.options.padding.right + 5, 
 889 |       this.volumeHeight - 5
 890 |     );
 891 |   }
 892 |   
 893 |   // 获取可见的数据点索引范围
 894 |   getVisibleDataIndices() {
 895 |     const chartWidth = this.options.width - this.options.padding.left - this.options.padding.right;
 896 |     const totalWidth = this.getFixedWidthChartWidth();
 897 |     
 898 |     // 计算可见区域对应的数据点索引
 899 |     let firstVisibleIndex = 0;
 900 |     let lastVisibleIndex = this.data.length - 1;
 901 |     
 902 |     if (totalWidth > chartWidth) {
 903 |       // 计算当前滚动位置下第一个可见的点
 904 |       const barWidthWithSpacing = this.options.barWidth + this.options.barSpacing;
 905 |       firstVisibleIndex = Math.floor(this.scrollOffsetX / barWidthWithSpacing);
 906 |       
 907 |       // 计算可见区域内可显示的数据点数量
 908 |       const visiblePointsCount = Math.ceil(chartWidth / barWidthWithSpacing);
 909 |       
 910 |       // 计算最后一个可见点
 911 |       lastVisibleIndex = Math.min(this.data.length - 1, firstVisibleIndex + visiblePointsCount);
 912 |       
 913 |       // 确保至少有一个点是可见的
 914 |       firstVisibleIndex = Math.max(0, firstVisibleIndex);
 915 |       lastVisibleIndex = Math.max(firstVisibleIndex, lastVisibleIndex);
 916 |     }
 917 |     
 918 |     return { first: firstVisibleIndex, last: lastVisibleIndex };
 919 |   }
 920 |   
 921 |   // 获取数据点在屏幕上的X坐标
 922 |   getDataPointScreenX(index) {
 923 |     const chartWidth = this.options.width - this.options.padding.left - this.options.padding.right;
 924 |     const totalWidth = this.getFixedWidthChartWidth();
 925 |     
 926 |     // 获取数据点的原始X坐标
 927 |     const x = this.getFixedWidthXPosition(index);
 928 |     
 929 |     // 应用滚动偏移
 930 |     let screenX = x;
 931 |     if (totalWidth > chartWidth) {
 932 |       screenX = x - this.scrollOffsetX;
 933 |     }
 934 |     
 935 |     // 加上左侧内边距
 936 |     return screenX + this.options.padding.left;
 937 |   }
 938 |   
 939 |   // 计算固定间距情况下的单个数据点X坐标
 940 |   getFixedWidthXPosition(index) {
 941 |     const barWidth = this.options.barWidth;
 942 |     const barSpacing = this.options.barSpacing;
 943 |     
 944 |     // 每个数据点占据固定宽度
 945 |     const pointWidth = barWidth + barSpacing;
 946 |     
 947 |     // 从左侧开始计算位置
 948 |     return index * pointWidth;
 949 |   }
 950 |   
 951 |   // 计算固定间距图表的总宽度
 952 |   getFixedWidthChartWidth() {
 953 |     const barWidth = this.options.barWidth;
 954 |     const barSpacing = this.options.barSpacing;
 955 |     const pointWidth = barWidth + barSpacing;
 956 |     
 957 |     // 添加右侧留白，确保最新数据点不会贴着边界
 958 |     return (this.data.length * pointWidth) + this.options.rightOffset;
 959 |   }
 960 |   
 961 |   drawText(text, x, y, options = {}) {
 962 |     const ctx = options.ctx || this.ctx;
 963 |     ctx.font = `${options.fontSize || 12}px ${options.fontFamily || 'Arial'}`;
 964 |     ctx.fillStyle = options.color || this.options.colors.text;
 965 |     ctx.textAlign = options.textAlign || 'left';
 966 |     ctx.textBaseline = options.textBaseline || 'top';
 967 |     ctx.fillText(text, x, y);
 968 |   }
 969 |   
 970 |   // Utility methods
 971 |   mapPriceToY(price) {
 972 |     const chartHeight = this.options.height - this.options.padding.top - this.options.padding.bottom;
 973 |     const priceRange = this.yRange.max - this.yRange.min;
 974 |     const ratio = (price - this.yRange.min) / priceRange;
 975 |     return this.options.height - this.options.padding.bottom - (ratio * chartHeight);
 976 |   }
 977 |   
 978 |   mapTimeToX(time) {
 979 |     const chartWidth = this.options.width - this.options.padding.left - this.options.padding.right;
 980 |     const timeRange = this.xRange.max - this.xRange.min;
 981 |     const ratio = (time.getTime() - this.xRange.min) / timeRange;
 982 |     return this.options.padding.left + (ratio * chartWidth);
 983 |   }
 984 |   
 985 |   mapVolumeToHeight(volume) {
 986 |     const ratio = volume / this.volumeRange.max;
 987 |     return ratio * this.volumeHeight;
 988 |   }
 989 |   
 990 |   formatTime(date) {
 991 |     const hours = date.getHours().toString().padStart(2, '0');
 992 |     const minutes = date.getMinutes().toString().padStart(2, '0');
 993 |     const seconds = date.getSeconds().toString().padStart(2, '0');
 994 |     return `${hours}:${minutes}:${seconds}`;
 995 |   }
 996 |   
 997 |   formatNumber(num) {
 998 |     if (num >= 10000000) {
 999 |       return (num / 10000000).toFixed(2) + '千万';
1000 |     } else if (num >= 10000) {
1001 |       return (num / 10000).toFixed(2) + '万';
1002 |     } else if (num >= 1000) {
1003 |       return (num / 1000).toFixed(2) + 'k';
1004 |     }
1005 |     return num.toFixed(2);
1006 |   }
1007 |   
1008 |   // Public API
1009 |   updateOptions(newOptions) {
1010 |     // 处理主题切换
1011 |     if (newOptions.theme && newOptions.theme !== this.options.theme) {
1012 |       this.switchTheme(newOptions.theme);
1013 |       delete newOptions.theme; // 已处理主题切换，移除避免重复处理
1014 |     }
1015 |     
1016 |     // 处理特殊选项
1017 |     if (newOptions.enableScroll !== undefined && 
1018 |         newOptions.enableScroll !== this.options.enableScroll) {
1019 |       this.options.enableScroll = newOptions.enableScroll;
1020 |       
1021 |       // 根据滚动配置更新事件监听
1022 |       if (this.options.enableScroll) {
1023 |         this.setupScrollEvents();
1024 |       } else {
1025 |         // 禁用滚动，重置到最新数据
1026 |         this.scrollOffsetX = 0;
1027 |         this.options.scrollPosition = 1.0;
1028 |       }
1029 |     }
1030 |     
1031 |     // 处理信息面板显示设置
1032 |     if (newOptions.infoBarEnabled !== undefined &&
1033 |         newOptions.infoBarEnabled !== this.options.infoBarEnabled) {
1034 |       this.options.infoBarEnabled = newOptions.infoBarEnabled;
1035 |       // 更新信息面板显示状态
1036 |       this.infoPanel.style.display = this.options.infoBarEnabled ? 'block' : 'none';
1037 |     }
1038 |     
1039 |     // 处理初始价格更新
1040 |     if (newOptions.initialPrice !== undefined && 
1041 |         newOptions.initialPrice !== this.options.initialPrice) {
1042 |       // 使用setInitialPrice方法更新初始价格，它会处理价格范围计算和重绘
1043 |       this.setInitialPrice(newOptions.initialPrice);
1044 |       delete newOptions.initialPrice; // 已处理，避免重复处理
1045 |     }
1046 |     
1047 |     // 处理坐标类型变更
1048 |     if (newOptions.coordinateType !== undefined && 
1049 |         newOptions.coordinateType !== this.options.coordinateType) {
1050 |       this.options.coordinateType = newOptions.coordinateType;
1051 |       
1052 |       // 重新计算价格范围
1053 |       this.calculatePriceRange();
1054 |     }
1055 |     
1056 |     // 处理涨跌停百分比变更
1057 |     if (newOptions.limitPercentage !== undefined && 
1058 |         newOptions.limitPercentage !== this.options.limitPercentage) {
1059 |       this.options.limitPercentage = newOptions.limitPercentage;
1060 |       
1061 |       // 如果当前是涨停板坐标，需要重新计算价格范围
1062 |       if (this.options.coordinateType === 'limit') {
1063 |         this.calculatePriceRange();
1064 |       }
1065 |     }
1066 |     
1067 |     // 更新其他选项
1068 |     Object.assign(this.options, newOptions);
1069 |     this.render();
1070 |   }
1071 |   
1072 |   // Mock data generation for testing
1073 |   static generateMockData(numPoints = 100, startTime = new Date(), startPrice = 100) {
1074 |     const data = [];
1075 |     let price = startPrice;
1076 |     let time = new Date(startTime);
1077 |     
1078 |     for (let i = 0; i < numPoints; i++) {
1079 |       // Random price movement
1080 |       const change = (Math.random() - 0.5) * 2;
1081 |       price = Math.max(1, price + change);
1082 |       
1083 |       // Random volume
1084 |       const volume = Math.floor(Math.random() * 10000) + 1000;
1085 |       
1086 |       data.push({
1087 |         time: new Date(time),
1088 |         price,
1089 |         volume
1090 |       });
1091 |       
1092 |       // Add seconds
1093 |       time = new Date(time.getTime() + 1000);
1094 |     }
1095 |     
1096 |     return data;
1097 |   }
1098 |   
1099 |   // 添加鼠标事件监听
1100 |   setupMouseEvents() {
1101 |     this.chartContainer.addEventListener('mousemove', this.handleMouseMove.bind(this));
1102 |     this.chartContainer.addEventListener('mouseenter', this.handleMouseEnter.bind(this));
1103 |     this.chartContainer.addEventListener('mouseleave', this.handleMouseLeave.bind(this));
1104 |     
1105 |     // 添加时间轴的点击事件处理
1106 |     this.timeAxisCanvas.addEventListener('click', this.handleTimeAxisClick.bind(this));
1107 |   }
1108 |   
1109 |   // 处理鼠标进入
1110 |   handleMouseEnter() {
1111 |     this.isMouseOver = true;
1112 |   }
1113 |   
1114 |   // 处理鼠标离开
1115 |   handleMouseLeave() {
1116 |     this.isMouseOver = false;
1117 |     this.hideTooltip();
1118 |     this.render(); // 重绘清除十字线
1119 |   }
1120 |   
1121 |   // 创建工具提示元素
1122 |   createTooltip() {
1123 |     this.tooltip = document.createElement('div');
1124 |     this.tooltip.className = 'fenshi-tooltip';
1125 |     this.tooltip.style.position = 'absolute';
1126 |     this.tooltip.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
1127 |     this.tooltip.style.color = '#fff';
1128 |     this.tooltip.style.padding = '8px 12px';
1129 |     this.tooltip.style.borderRadius = '4px';
1130 |     this.tooltip.style.fontSize = '12px';
1131 |     this.tooltip.style.pointerEvents = 'none';
1132 |     this.tooltip.style.zIndex = '10';
1133 |     this.tooltip.style.display = 'none';
1134 |     this.tooltip.style.whiteSpace = 'nowrap';
1135 |     this.tooltip.style.boxShadow = '0 2px 5px rgba(0, 0, 0, 0.3)';
1136 |     this.tooltip.style.transition = 'transform 0.1s ease-out';
1137 |     this.tooltip.style.transformOrigin = 'left center';
1138 |     
1139 |     this.chartContainer.appendChild(this.tooltip);
1140 |   }
1141 |   
1142 |   // 更新工具提示内容和位置
1143 |   updateTooltip() {
1144 |     if (this.hoveredDataIndex < 0 || this.hoveredDataIndex >= this.data.length) {
1145 |       this.hideTooltip();
1146 |       return;
1147 |     }
1148 |     
1149 |     const dataPoint = this.data[this.hoveredDataIndex];
1150 |     const avgPrice = this.averageData[this.hoveredDataIndex];
1151 |     
1152 |     if (!dataPoint) return;
1153 |     
1154 |     // 计算涨跌和涨跌幅
1155 |     const openPrice = this.priceInfo.open;
1156 |     const change = dataPoint.price - openPrice;
1157 |     const changePercent = (change / openPrice) * 100;
1158 |     const changeSign = change >= 0 ? '+' : '';
1159 |     
1160 |     // 计算总金额（价格 * 成交量）
1161 |     const amount = dataPoint.price * dataPoint.volume;
1162 |     
1163 |     // 更新提示框内容，添加均价信息
1164 |     this.tooltip.innerHTML = `
1165 |       <div style="font-weight: bold; margin-bottom: 5px;">${this.formatTime(dataPoint.time)}</div>
1166 |       <div>价格: <span style="font-weight: bold;">${dataPoint.price.toFixed(2)}</span></div>
1167 |       ${avgPrice !== undefined ? `<div>均价: <span style="color: ${this.options.colors.average}; font-weight: bold;">${avgPrice.toFixed(2)}</span></div>` : ''}
1168 |       <div>涨跌: <span style="color: ${change >= 0 ? this.options.colors.upBar : this.options.colors.downBar}; font-weight: bold;">${changeSign}${change.toFixed(2)} (${changeSign}${changePercent.toFixed(2)}%)</span></div>
1169 |       <div>成交量: ${this.formatNumber(dataPoint.volume)}</div>
1170 |       <div>金额: ${this.formatNumber(amount)}</div>
1171 |     `;
1172 |     
1173 |     // 更新提示框位置 - 跟随鼠标
1174 |     const rect = this.chartContainer.getBoundingClientRect();
1175 |     const offsetX = 15; // 鼠标右侧偏移量
1176 |     const offsetY = 10; // 鼠标上方偏移量
1177 |     
1178 |     let tooltipX = this.mousePosition.x + offsetX;
1179 |     let tooltipY = this.mousePosition.y - offsetY;
1180 |     
1181 |     // 确保提示框不超出容器右侧
1182 |     const tooltipRect = this.tooltip.getBoundingClientRect();
1183 |     if (tooltipX + tooltipRect.width > rect.width) {
1184 |       tooltipX = this.mousePosition.x - tooltipRect.width - offsetX;
1185 |     }
1186 |     
1187 |     // 确保提示框不超出容器顶部
1188 |     if (tooltipY - tooltipRect.height < 0) {
1189 |       tooltipY = this.mousePosition.y + tooltipRect.height + offsetY;
1190 |     }
1191 |     
1192 |     this.tooltip.style.left = `${tooltipX}px`;
1193 |     this.tooltip.style.top = `${tooltipY}px`;
1194 |     this.tooltip.style.display = 'block';
1195 |   }
1196 |   
1197 |   // 隐藏工具提示
1198 |   hideTooltip() {
1199 |     if (this.tooltip) {
1200 |       this.tooltip.style.display = 'none';
1201 |     }
1202 |   }
1203 |   
1204 |   // 更新当前悬停的数据点索引
1205 |   updateHoveredDataIndex() {
1206 |     if (!this.isMouseOver || this.data.length === 0) {
1207 |       this.hoveredDataIndex = -1;
1208 |       return;
1209 |     }
1210 |     
1211 |     // 鼠标在价格图内
1212 |     if (this.mousePosition.y >= 0 && this.mousePosition.y <= this.options.height) {
1213 |       const chartWidth = this.options.width - this.options.padding.left - this.options.padding.right;
1214 |       
1215 |       // 确定可见数据范围
1216 |       const visibleIndices = this.getVisibleDataIndices();
1217 |       const firstVisibleIndex = visibleIndices.first;
1218 |       const lastVisibleIndex = visibleIndices.last;
1219 |       
1220 |       // 如果鼠标在图表数据区域内
1221 |       if (this.mousePosition.x >= this.options.padding.left && 
1222 |           this.mousePosition.x <= this.options.width - this.options.padding.right) {
1223 |         
1224 |         // 获取鼠标相对于图表左边缘的位置
1225 |         const mouseX = this.mousePosition.x - this.options.padding.left;
1226 |         
1227 |         // 计算每个数据点在屏幕上的实际宽度
1228 |         const barWidthWithSpacing = this.options.barWidth + this.options.barSpacing;
1229 |         const visiblePointsCount = lastVisibleIndex - firstVisibleIndex + 1;
1230 |         
1231 |         let hoveredIndex = -1;
1232 |         
1233 |         if (visiblePointsCount <= 1) {
1234 |           // 如果只有一个可见数据点
1235 |           hoveredIndex = firstVisibleIndex;
1236 |         } else {
1237 |           // 对于固定宽度模式，直接计算鼠标位置对应的数据点
1238 |           const barPositions = [];
1239 |           
1240 |           // 计算每个可见数据点的屏幕X坐标
1241 |           for (let i = firstVisibleIndex; i <= lastVisibleIndex; i++) {
1242 |             const x = this.getDataPointScreenX(i) - this.options.padding.left;
1243 |             barPositions.push({ index: i, x: x });
1244 |           }
1245 |           
1246 |           // 找到最接近鼠标位置的数据点
1247 |           let closestBar = null;
1248 |           let minDistance = Number.MAX_VALUE;
1249 |           
1250 |           for (const bar of barPositions) {
1251 |             const distance = Math.abs(bar.x - mouseX);
1252 |             if (distance < minDistance) {
1253 |               minDistance = distance;
1254 |               closestBar = bar;
1255 |             }
1256 |           }
1257 |           
1258 |           if (closestBar) {
1259 |             hoveredIndex = closestBar.index;
1260 |           }
1261 |         }
1262 |         
1263 |         this.hoveredDataIndex = hoveredIndex;
1264 |       } else {
1265 |         this.hoveredDataIndex = -1;
1266 |       }
1267 |     } else {
1268 |       this.hoveredDataIndex = -1;
1269 |     }
1270 |   }
1271 |   
1272 |   // 绘制十字线
1273 |   drawCrosshair() {
1274 |     if (this.hoveredDataIndex < 0 || this.hoveredDataIndex >= this.data.length) return;
1275 |     
1276 |     const dataPoint = this.data[this.hoveredDataIndex];
1277 |     
1278 |     // 获取数据点对应的坐标
1279 |     const x = this.getDataPointScreenX(this.hoveredDataIndex);
1280 |     const y = this.mapPriceToY(dataPoint.price);
1281 |     
1282 |     // 绘制垂直线 - 通过价格图和成交量图
1283 |     this.ctx.beginPath();
1284 |     this.ctx.strokeStyle = this.options.colors.crosshair;
1285 |     this.ctx.setLineDash([1.5, 1.5]);
1286 |     this.ctx.lineWidth = 1;
1287 |     this.ctx.moveTo(x, this.options.padding.top);
1288 |     this.ctx.lineTo(x, this.options.height - this.options.padding.bottom);
1289 |     this.ctx.stroke();
1290 |     
1291 |     this.volumeCtx.beginPath();
1292 |     this.volumeCtx.strokeStyle = this.options.colors.crosshair;
1293 |     this.volumeCtx.setLineDash([1.5, 1.5]);
1294 |     this.volumeCtx.lineWidth = 1;
1295 |     this.volumeCtx.moveTo(x, 0);
1296 |     this.volumeCtx.lineTo(x, this.volumeHeight);
1297 |     this.volumeCtx.stroke();
1298 |     
1299 |     // 也在时间轴上标记当前位置
1300 |     this.timeAxisCtx.beginPath();
1301 |     this.timeAxisCtx.strokeStyle = this.options.colors.crosshair;
1302 |     this.timeAxisCtx.setLineDash([]);
1303 |     this.timeAxisCtx.lineWidth = 1.5;
1304 |     this.timeAxisCtx.moveTo(x, 0);
1305 |     this.timeAxisCtx.lineTo(x, this.options.timeAxisHeight);
1306 |     this.timeAxisCtx.stroke();
1307 |     
1308 |     // 绘制水平线 - 仅在价格图
1309 |     this.ctx.beginPath();
1310 |     this.ctx.moveTo(this.options.padding.left, y);
1311 |     this.ctx.lineTo(this.options.width - this.options.padding.right, y);
1312 |     this.ctx.stroke();
1313 |     
1314 |     // 重置线条样式
1315 |     this.ctx.setLineDash([]);
1316 |     this.volumeCtx.setLineDash([]);
1317 |     
1318 |     // 计算涨跌幅百分比
1319 |     const percentChange = ((dataPoint.price - this.priceInfo.open) / this.priceInfo.open) * 100;
1320 |     const isUp = percentChange >= 0;
1321 |     
1322 |     // 根据涨跌确定显示颜色
1323 |     const textColor = isUp ? this.options.colors.upBar : this.options.colors.downBar;
1324 |     
1325 |     // 格式化显示文本
1326 |     const priceChangeText = (isUp ? "+" : "") + percentChange.toFixed(2) + "%";
1327 |     
1328 |     // 绘制价格标签
1329 |     this.drawCrosshairLabel(this.ctx, priceChangeText, this.options.width - this.options.padding.right, y, 'price', textColor);
1330 |     
1331 |     // 绘制时间标签（时间轴上）
1332 |     const timeText = this.formatTime(dataPoint.time);
1333 |     this.timeAxisCtx.fillStyle = this.options.colors.background;
1334 |     this.timeAxisCtx.fillRect(x - 40, 0, 80, this.options.timeAxisHeight);
1335 |     this.timeAxisCtx.fillStyle = this.options.colors.text;
1336 |     this.timeAxisCtx.font = 'bold 10px Arial';
1337 |     this.timeAxisCtx.textAlign = 'center';
1338 |     this.timeAxisCtx.textBaseline = 'middle';
1339 |     this.timeAxisCtx.fillText(timeText, x, this.options.timeAxisHeight / 2);
1340 |     
1341 |     // 突出显示当前悬停点
1342 |     this.highlightDataPoint(x, y);
1343 |   }
1344 |   
1345 |   // 绘制十字线标签（可复用的方法）
1346 |   drawCrosshairLabel(ctx, text, x, y, type, textColor) {
1347 |     const textWidth = ctx.measureText(text).width + 10;
1348 |     const textHeight = 20;
1349 |     
1350 |     // 根据标签类型调整位置
1351 |     let labelX = x;
1352 |     let labelY = y;
1353 |     
1354 |     if (type === 'price') {
1355 |       // 价格标签绘制在右侧
1356 |       labelX = x;
1357 |       labelY = y - textHeight / 2;
1358 |     } else if (type === 'time') {
1359 |       // 时间标签绘制在底部并水平居中
1360 |       labelX = x - textWidth / 2;
1361 |       labelY = y - textHeight / 2;
1362 |     }
1363 |     
1364 |     // 绘制标签背景
1365 |     ctx.fillStyle = this.options.colors.background;
1366 |     ctx.strokeStyle = this.options.colors.crosshair;
1367 |     ctx.fillRect(labelX, labelY, textWidth, textHeight);
1368 |     ctx.strokeRect(labelX, labelY, textWidth, textHeight);
1369 |     
1370 |     // 绘制文本（使用传入的颜色）
1371 |     ctx.fillStyle = textColor || this.options.colors.text;
1372 |     
1373 |     if (type === 'price') {
1374 |       ctx.textAlign = 'left';
1375 |       ctx.textBaseline = 'middle';
1376 |       ctx.fillText(text, labelX + 5, y);
1377 |     } else if (type === 'time') {
1378 |       ctx.textAlign = 'center';
1379 |       ctx.textBaseline = 'middle';
1380 |       ctx.fillText(text, x, y);
1381 |     }
1382 |   }
1383 |   
1384 |   // 绘制当前悬停点
1385 |   highlightDataPoint(x, y) {
1386 |     // 绘制外圈
1387 |     this.ctx.beginPath();
1388 |     this.ctx.arc(x, y, 5, 0, Math.PI * 2);
1389 |     this.ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
1390 |     this.ctx.fill();
1391 |     
1392 |     // 绘制内圈
1393 |     this.ctx.beginPath();
1394 |     this.ctx.arc(x, y, 3, 0, Math.PI * 2);
1395 |     this.ctx.fillStyle = 'white';
1396 |     this.ctx.fill();
1397 |     this.ctx.strokeStyle = this.options.colors.crosshair;
1398 |     this.ctx.lineWidth = 1;
1399 |     this.ctx.stroke();
1400 |   }
1401 |   
1402 |   // 绘制独立的时间轴
1403 |   drawTimeAxis() {
1404 |     if (this.data.length === 0) return;
1405 |     
1406 |     this.timeAxisCtx.fillStyle = this.options.colors.background;
1407 |     this.timeAxisCtx.fillRect(0, 0, this.options.width, this.options.timeAxisHeight);
1408 |     
1409 |     // 计算水平网格线
1410 |     this.timeAxisCtx.beginPath();
1411 |     this.timeAxisCtx.strokeStyle = this.options.colors.grid;
1412 |     this.timeAxisCtx.lineWidth = 0.5;
1413 |     this.timeAxisCtx.moveTo(this.options.padding.left, 0);
1414 |     this.timeAxisCtx.lineTo(this.options.width - this.options.padding.right, 0);
1415 |     this.timeAxisCtx.stroke();
1416 |     
1417 |     // 获取可见的数据点
1418 |     const visibleIndices = this.getVisibleDataIndices();
1419 |     const firstVisibleIndex = visibleIndices.first;
1420 |     const lastVisibleIndex = visibleIndices.last;
1421 |     
1422 |     // 计算可见数据点数量
1423 |     const visibleDataPoints = lastVisibleIndex - firstVisibleIndex + 1;
1424 |     
1425 |     // 根据可见柱子数量确定要显示的时间标签数量
1426 |     let numLabels;
1427 |     
1428 |     if (visibleDataPoints <= 40) {
1429 |       // 当可见柱子数量小于等于40，只显示最新的一个时间点
1430 |       numLabels = 1;
1431 |       // 只画最新的时间点
1432 |       this.drawTimeLabel(lastVisibleIndex);
1433 |       
1434 |       // 绘制垂直网格线
1435 |       const x = this.getDataPointScreenX(lastVisibleIndex);
1436 |       this.timeAxisCtx.beginPath();
1437 |       this.timeAxisCtx.strokeStyle = this.options.colors.grid;
1438 |       this.timeAxisCtx.setLineDash([5, 5]);
1439 |       this.timeAxisCtx.moveTo(x, 0);
1440 |       this.timeAxisCtx.lineTo(x, 5);
1441 |       this.timeAxisCtx.stroke();
1442 |       this.timeAxisCtx.setLineDash([]);
1443 |       return;
1444 |     } else if (visibleDataPoints > 40 && visibleDataPoints <= 60) {
1445 |       // 40-60个柱子显示3个时间标签
1446 |       numLabels = 3;
1447 |     } else if (visibleDataPoints > 60 && visibleDataPoints <= 90) {
1448 |       // 60-90个柱子显示4个时间标签
1449 |       numLabels = 4;
1450 |     } else {
1451 |       // 90个以上柱子显示5个时间标签
1452 |       numLabels = 5;
1453 |     }
1454 |     
1455 |     // 计算时间点索引，确保均匀分布
1456 |     for (let i = 0; i < numLabels; i++) {
1457 |       // 计算均匀分布的索引，确保第一个点是firstVisibleIndex，最后一个点是lastVisibleIndex
1458 |       const ratio = i / (numLabels - 1);
1459 |       const dataIndex = Math.round(firstVisibleIndex + ratio * (lastVisibleIndex - firstVisibleIndex));
1460 |       
1461 |       // 绘制时间标签
1462 |       this.drawTimeLabel(dataIndex);
1463 |       
1464 |       // 绘制垂直网格线
1465 |       const x = this.getDataPointScreenX(dataIndex);
1466 |       this.timeAxisCtx.beginPath();
1467 |       this.timeAxisCtx.strokeStyle = this.options.colors.grid;
1468 |       this.timeAxisCtx.setLineDash([5, 5]);
1469 |       this.timeAxisCtx.moveTo(x, 0);
1470 |       this.timeAxisCtx.lineTo(x, 5);
1471 |       this.timeAxisCtx.stroke();
1472 |       this.timeAxisCtx.setLineDash([]);
1473 |     }
1474 |   }
1475 |   
1476 |   // 绘制单个时间标签
1477 |   drawTimeLabel(dataIndex) {
1478 |     if (dataIndex < 0 || dataIndex >= this.data.length) return;
1479 |     
1480 |     const time = this.data[dataIndex].time;
1481 |     const x = this.getDataPointScreenX(dataIndex);
1482 |     
1483 |     // 绘制时间标签
1484 |     this.timeAxisCtx.fillStyle = this.options.colors.text;
1485 |     this.timeAxisCtx.font = '10px Arial';
1486 |     this.timeAxisCtx.textAlign = 'center';
1487 |     this.timeAxisCtx.textBaseline = 'top';
1488 |     
1489 |     // 根据时间格式化（可以根据需要添加日期）
1490 |     const timeText = this.formatTime(time);
1491 |     
1492 |     // 检查当前时间是否跨天或是特殊时间点
1493 |     const hours = time.getHours();
1494 |     const minutes = time.getMinutes();
1495 |     
1496 |     // 对于特殊时间点（开盘、中午、收盘等），添加更详细的标签
1497 |     let additionalText = '';
1498 |     // if (hours === 9 && minutes === 30) {
1499 |     //   additionalText = '开盘';
1500 |     // } else if (hours === 11 && minutes === 30) {
1501 |     //   additionalText = '午休';
1502 |     // } else if (hours === 13 && minutes === 0) {
1503 |     //   additionalText = '开盘';
1504 |     // } else if (hours === 15 && minutes === 0) {
1505 |     //   additionalText = '收盘';
1506 |     // }
1507 |     
1508 |     if (additionalText) {
1509 |       // 绘制两行标签
1510 |       this.timeAxisCtx.fillText(timeText, x, 8);
1511 |       this.timeAxisCtx.fillText(additionalText, x, 22);
1512 |     } else {
1513 |       // 只绘制时间
1514 |       this.timeAxisCtx.fillText(timeText, x, 15);
1515 |     }
1516 |   }
1517 |   
1518 |   // 处理时间轴点击，可以用于跳转到特定时间点
1519 |   handleTimeAxisClick(e) {
1520 |     if (!this.options.enableScroll) return;
1521 |     
1522 |     const rect = this.timeAxisCanvas.getBoundingClientRect();
1523 |     const x = e.clientX - rect.left;
1524 |     
1525 |     // 仅处理在有效区域内的点击
1526 |     if (x >= this.options.padding.left && x <= this.options.width - this.options.padding.right) {
1527 |       // 找到最接近点击位置的数据点
1528 |       const visibleIndices = this.getVisibleDataIndices();
1529 |       
1530 |       // 获取屏幕坐标到数据索引的映射
1531 |       let closestIndex = -1;
1532 |       let minDistance = Number.MAX_VALUE;
1533 |       
1534 |       for (let i = visibleIndices.first; i <= visibleIndices.last; i++) {
1535 |         const dataX = this.getDataPointScreenX(i);
1536 |         const distance = Math.abs(dataX - x);
1537 |         
1538 |         if (distance < minDistance) {
1539 |           minDistance = distance;
1540 |           closestIndex = i;
1541 |         }
1542 |       }
1543 |       
1544 |       if (closestIndex >= 0) {
1545 |         // 设置十字线位置到点击的时间点
1546 |         this.hoveredDataIndex = closestIndex;
1547 |         this.render();
1548 |         
1549 |         if (this.options.tooltipEnabled) {
1550 |           this.updateTooltip();
1551 |         }
1552 |       }
1553 |     }
1554 |   }
1555 |   
1556 |   // 修改drawTimeLabels方法，与时间轴标签数量保持一致，只影响垂直网格线的绘制
1557 |   drawTimeLabels() {
1558 |     if (this.data.length === 0) return;
1559 |     
1560 |     // 获取可见的数据点
1561 |     const visibleIndices = this.getVisibleDataIndices();
1562 |     const firstVisibleIndex = visibleIndices.first;
1563 |     const lastVisibleIndex = visibleIndices.last;
1564 |     
1565 |     // 计算可见数据点数量
1566 |     const visibleDataPoints = lastVisibleIndex - firstVisibleIndex + 1;
1567 |     
1568 |     // 根据可见柱子数量确定要显示的垂直网格线数量
1569 |     let numGridLines;
1570 |     
1571 |     if (visibleDataPoints <= 40) {
1572 |       // 当可见柱子数量小于等于40，只显示最新的一个垂直线
1573 |       numGridLines = 1;
1574 |       // 只画最右侧的网格线
1575 |       const x = this.getDataPointScreenX(lastVisibleIndex);
1576 |       
1577 |       // 在价格图上画垂直网格线
1578 |       this.ctx.beginPath();
1579 |       this.ctx.strokeStyle = this.options.colors.grid;
1580 |       this.ctx.setLineDash([5, 5]);
1581 |       this.ctx.moveTo(x, this.options.padding.top);
1582 |       this.ctx.lineTo(x, this.options.height - this.options.padding.bottom);
1583 |       this.ctx.stroke();
1584 |       
1585 |       // 在成交量图上画垂直网格线
1586 |       this.volumeCtx.beginPath();
1587 |       this.volumeCtx.strokeStyle = this.options.colors.grid;
1588 |       this.volumeCtx.setLineDash([5, 5]);
1589 |       this.volumeCtx.moveTo(x, 0);
1590 |       this.volumeCtx.lineTo(x, this.volumeHeight);
1591 |       this.volumeCtx.stroke();
1592 |       
1593 |       // 重置虚线样式，确保不会影响其他绘制
1594 |       this.ctx.setLineDash([]);
1595 |       this.volumeCtx.setLineDash([]);
1596 |       return;
1597 |     } 
1598 |     else if (visibleDataPoints > 40 && visibleDataPoints <= 60) {
1599 |       // 40-60个柱子显示3个网格线
1600 |       numGridLines = 3;
1601 |     } else if (visibleDataPoints > 60 && visibleDataPoints <= 90) {
1602 |       // 60-90个柱子显示4个网格线
1603 |       numGridLines = 4;
1604 |     } else {
1605 |       // 90个以上柱子显示5个网格线
1606 |       numGridLines = 5;
1607 |     }
1608 |     
1609 |     // 绘制垂直网格线
1610 |     for (let i = 0; i < numGridLines; i++) {
1611 |       // 计算均匀分布的索引，确保第一个点是firstVisibleIndex，最后一个点是lastVisibleIndex
1612 |       const ratio = i / (numGridLines - 1);
1613 |       const dataIndex = Math.round(firstVisibleIndex + ratio * (lastVisibleIndex - firstVisibleIndex));
1614 |       const x = this.getDataPointScreenX(dataIndex);
1615 |       
1616 |       // 在价格图上画垂直网格线
1617 |       this.ctx.beginPath();
1618 |       this.ctx.strokeStyle = this.options.colors.grid;
1619 |       this.ctx.setLineDash([5, 5]);
1620 |       this.ctx.moveTo(x, this.options.padding.top);
1621 |       this.ctx.lineTo(x, this.options.height - this.options.padding.bottom);
1622 |       this.ctx.stroke();
1623 |       
1624 |       // 在成交量图上画垂直网格线
1625 |       this.volumeCtx.beginPath();
1626 |       this.volumeCtx.strokeStyle = this.options.colors.grid;
1627 |       this.volumeCtx.setLineDash([5, 5]);
1628 |       this.volumeCtx.moveTo(x, 0);
1629 |       this.volumeCtx.lineTo(x, this.volumeHeight);
1630 |       this.volumeCtx.stroke();
1631 |     }
1632 |     
1633 |     // 重置虚线样式
1634 |     this.ctx.setLineDash([]);
1635 |     this.volumeCtx.setLineDash([]);
1636 |   }
1637 |   
1638 |   // 设置初始参考价格
1639 |   setInitialPrice(price) {
1640 |     if (typeof price === 'number' && price > 0) {
1641 |       this.options.initialPrice = price;
1642 |       this.priceInfo.open = price;
1643 |       
1644 |       // 如果是涨停板坐标，重新计算价格范围
1645 |       if (this.options.coordinateType === 'limit') {
1646 |         this.calculatePriceRange();
1647 |         this.render();
1648 |       }
1649 |       
1650 |       // 更新信息面板
1651 |       this.updateInfoPanel();
1652 |       
1653 |       return true;
1654 |     }
1655 |     return false;
1656 |   }
1657 | }
1658 | 
1659 | // If using as ES module
1660 | if (typeof exports !== 'undefined') {
1661 |   exports.FenshiChart = FenshiChart;
1662 | }


--------------------------------------------------------------------------------