leemuzi/real-time-fund
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 调整买入卖出折线图样式

Browse Source
This commit is contained in:
hzm
2026-02-24 00:18:11 +08:00
parent fe1f67407d
commit 6e6ec6cb03
1 changed files with 9 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
app/components/FundTrendChart.jsx
View File

@@ -139,7 +139,8 @@ export default function FundTrendChart({ code, isExpanded, onToggleExpand, trans
type: 'line', // Use line type with showLine: false to simulate scatter on Category scale type: 'line', // Use line type with showLine: false to simulate scatter on Category scale
label: '买入', label: '买入',
data: buyPoints, data: buyPoints,
borderColor: '#ef4444', // Red borderColor: '#ffffff',
borderWidth: 1,
backgroundColor: '#ef4444', backgroundColor: '#ef4444',
pointStyle: 'circle', pointStyle: 'circle',
pointRadius: 2.5, pointRadius: 2.5,
@@ -151,7 +152,8 @@ export default function FundTrendChart({ code, isExpanded, onToggleExpand, trans
type: 'line', type: 'line',
label: '卖出', label: '卖出',
data: sellPoints, data: sellPoints,
borderColor: '#22c55e', // Green borderColor: '#ffffff',
borderWidth: 1,
backgroundColor: '#22c55e', backgroundColor: '#22c55e',
pointStyle: 'circle', pointStyle: 'circle',
pointRadius: 2.5, pointRadius: 2.5,
@@ -243,11 +245,11 @@ export default function FundTrendChart({ code, isExpanded, onToggleExpand, trans
const labelWidth = ctx.measureText(text).width + 12; const labelWidth = ctx.measureText(text).width + 12;
// Draw label above the point // Draw label above the point
ctx.globalAlpha = 0.8; ctx.globalAlpha = 0.7;
ctx.fillStyle = bgColor; ctx.fillStyle = bgColor;
ctx.fillRect(x - labelWidth/2, y - 24, labelWidth, 18); ctx.fillRect(x - labelWidth/2, y - 24, labelWidth, 18);
ctx.globalAlpha = 1.0; ctx.globalAlpha = 0.7;
ctx.fillStyle = textColor; ctx.fillStyle = textColor;
ctx.textAlign = 'center'; ctx.textAlign = 'center';
ctx.textBaseline = 'middle'; ctx.textBaseline = 'middle';
@@ -272,7 +274,7 @@ export default function FundTrendChart({ code, isExpanded, onToggleExpand, trans
if (datasets[2] && datasets[2].data) { if (datasets[2] && datasets[2].data) {
const firstSellIndex = datasets[2].data.findIndex(v => v !== null && v !== undefined); const firstSellIndex = datasets[2].data.findIndex(v => v !== null && v !== undefined);
if (firstSellIndex !== -1) { if (firstSellIndex !== -1) {
drawPointLabel(2, firstSellIndex, '卖出', primaryColor); drawPointLabel(2, firstSellIndex, '卖出', '#22c55e');
} }
} }
@@ -355,8 +357,8 @@ export default function FundTrendChart({ code, isExpanded, onToggleExpand, trans
if (dsIndex > 0 && datasets[dsIndex]) { if (dsIndex > 0 && datasets[dsIndex]) {
const label = datasets[dsIndex].label; const label = datasets[dsIndex].label;
// Determine background color based on dataset index // Determine background color based on dataset index
// 1 = Buy (Red), 2 = Sell (Theme Color) // 1 = Buy (Red), 2 = Sell (Green)
const bgColor = dsIndex === 1 ? '#ef4444' : primaryColor; const bgColor = dsIndex === 1 ? '#ef4444' : '#22c55e';
// If collision, offset Buy label upwards // If collision, offset Buy label upwards
let yOffset = 0; let yOffset = 0;