Skip to content

Commit 652ffe1

Browse files
committed
feat(stock): 股票图默认配置项优化 & 增加 demo
1 parent 832abeb commit 652ffe1

File tree

4 files changed

+48
-6
lines changed

4 files changed

+48
-6
lines changed

examples/more-plots/stock/demo/custom-crosshairs.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -42,9 +42,9 @@ fetch('https://gw.alipayobjects.com/os/antfincdn/qtQ9nYfYJe/stock-data.json')
4242
},
4343
// 自定义 crosshairs textBackground 样式
4444
textBackground: {
45-
padding: [2, 4],
45+
padding: [4, 8],
4646
style: {
47-
fill: '#666',
47+
fill: '#363636',
4848
},
4949
},
5050
},
Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { Stock } from '@antv/g2plot';
2+
3+
fetch('https://gw.alipayobjects.com/os/antfincdn/qtQ9nYfYJe/stock-data.json')
4+
.then((data) => data.json())
5+
.then((data) => {
6+
const stockPlot = new Stock('container', {
7+
data,
8+
xField: 'trade_date',
9+
yField: ['open', 'close', 'high', 'low'],
10+
tooltip: {
11+
// 关闭 tooltip 悬浮内容
12+
showContent: false,
13+
},
14+
style: {
15+
stroke: '#666',
16+
lineWidth: 0.5,
17+
},
18+
});
19+
20+
stockPlot.render();
21+
});

examples/more-plots/stock/demo/meta.json

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,14 @@
4343
"en": "Custom crosshairs pointer"
4444
},
4545
"screenshot": "https://gw.alipayobjects.com/zos/antfincdn/UKHCDVwzFB/stock-crosshairs.png"
46+
},
47+
{
48+
"filename": "custom-style.ts",
49+
"title": {
50+
"zh": "自定义样式",
51+
"en": "Custom style"
52+
},
53+
"screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*-HIwQbCnfFUAAAAAAAAAAAAAARQnAQ"
4654
}
4755
]
4856
}

src/plots/stock/constant.ts

Lines changed: 17 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,14 +16,27 @@ export const DEFAULT_TOOLTIP_OPTIONS = {
1616
type: 'xy',
1717
follow: true,
1818
text: (type, defaultContent, items) => {
19-
const tooltipCrosshairsText = { position: type === 'y' ? 'start' : 'end' };
19+
let textContent;
2020
if (type === 'x') {
2121
const item = items[0];
22-
tooltipCrosshairsText['content'] = item ? item.title : defaultContent;
22+
textContent = item ? item.title : defaultContent;
2323
} else {
24-
tooltipCrosshairsText['content'] = defaultContent;
24+
textContent = defaultContent;
2525
}
26-
return tooltipCrosshairsText;
26+
return {
27+
position: type === 'y' ? 'start' : 'end',
28+
content: textContent,
29+
style: {
30+
fill: '#dfdfdf',
31+
},
32+
};
33+
},
34+
// 自定义 crosshairs textBackground 样式
35+
textBackground: {
36+
padding: [2, 4],
37+
style: {
38+
fill: '#666',
39+
},
2740
},
2841
},
2942
};

0 commit comments

Comments
 (0)