Skip to content

Commit c6d9cf5

Browse files
xile611xile611
authored
Merge pull request #3698 from VisActor/docs/demo-label-tooltip
docs: add label tooltip demo
2 parents 4d720b4 + 278a883 commit c6d9cf5

File tree

4 files changed

+256
-1
lines changed

4 files changed

+256
-1
lines changed

‎docs/assets/examples/en/label/label-mark-tooltip.md

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
---
2+
category: examples
3+
group: label
4+
title: Label-Triggered Tooltips
5+
keywords: label,richtext
6+
cover: /vchart/preview/label-tooltip-1.13.5.png
7+
option: barChart#label
8+
---
9+
10+
# Label-Triggered Tooltips
11+
12+
Starting from version `1.13.5`, VChart supports displaying tooltips on labels. The label tooltip maintains consistency with the mark tooltip and is affected by the tooltip.mark configuration. You can distinguish whether the tooltip is triggered by a label or a shape in related callbacks.
13+
14+
## Key Configuration
15+
16+
- `label`: Label configuration.
17+
- `visible`: Display labels.
18+
- `interactive`: Whether labels respond to interactions.
19+
- `showRelatedMarkTooltip`: Whether labels display tooltips associated with the related marks.
20+
21+
## Demo source
22+
23+
```javascript livedemo
24+
const data = [
25+
{ year: '2012', type: 'Forest', value: 320 },
26+
{ year: '2012', type: 'Steppe', value: 220 },
27+
{ year: '2012', type: 'Desert', value: 150 },
28+
{ year: '2012', type: 'Wetland', value: 98 },
29+
{ year: '2013', type: 'Forest', value: 332 },
30+
{ year: '2013', type: 'Steppe', value: 182 },
31+
{ year: '2013', type: 'Desert', value: 232 },
32+
{ year: '2013', type: 'Wetland', value: 77 },
33+
{ year: '2014', type: 'Forest', value: 301 },
34+
{ year: '2014', type: 'Steppe', value: 191 },
35+
{ year: '2014', type: 'Desert', value: 201 },
36+
{ year: '2014', type: 'Wetland', value: 101 },
37+
{ year: '2015', type: 'Forest', value: 334 },
38+
{ year: '2015', type: 'Steppe', value: 234 },
39+
{ year: '2015', type: 'Desert', value: 154 },
40+
{ year: '2015', type: 'Wetland', value: 99 },
41+
{ year: '2016', type: 'Forest', value: 390 },
42+
{ year: '2016', type: 'Steppe', value: 290 },
43+
{ year: '2016', type: 'Desert', value: 190 },
44+
{ year: '2016', type: 'Wetland', value: 40 }
45+
];
46+
const aggregation = {};
47+
data.forEach(({ year, value }) => {
48+
if (!aggregation[year]) {
49+
aggregation[year] = 0;
50+
}
51+
aggregation[year] += value;
52+
});
53+
const spec = {
54+
type: 'bar',
55+
data: [
56+
{
57+
id: 'bar',
58+
values: data
59+
}
60+
],
61+
xField: ['year', 'type'],
62+
yField: 'value',
63+
seriesField: 'type',
64+
bar: {
65+
state: {
66+
legend_hover_reverse: {
67+
fill: '#ccc'
68+
}
69+
}
70+
},
71+
legends: {
72+
visible: true
73+
},
74+
label: { visible: true, interactive: true, showRelatedMarkTooltip: true },
75+
tooltip: {
76+
mark: {
77+
title: {
78+
value: (datum, { node }) => (node.type === 'text' ? `Label: ${datum['year']}` : datum['type'])
79+
},
80+
content: [
81+
{
82+
key: datum => datum['type'],
83+
value: datum => datum['value']
84+
},
85+
{
86+
hasShape: false,
87+
key: 'Proportion',
88+
value: (datum, ...args) => Math.round((datum['value'] / aggregation[datum['year']]) * 10000) / 100 + '%'
89+
}
90+
]
91+
},
92+
dimension: {
93+
title: {
94+
value: datum => `Y${datum['year']} (mouse scrolling available)`
95+
},
96+
content: [
97+
{
98+
key: datum => datum['type'],
99+
value: datum => datum['value']
100+
},
101+
{
102+
hasShape: false,
103+
key: datum => datum['type'] + ' Proportion',
104+
value: datum => Math.round((datum['value'] / aggregation[datum['year']]) * 10000) / 100 + '%'
105+
}
106+
]
107+
},
108+
enterable: true,
109+
style: {
110+
maxContentHeight: 120
111+
}
112+
}
113+
};
114+
115+
const vchart = new VChart(spec, { dom: CONTAINER_ID });
116+
vchart.renderSync();
117+
118+
// Just for the convenience of console debugging, DO NOT COPY!
119+
window['vchart'] = vchart;
120+
```
121+
122+
## Related Tutorials
123+
124+
[Scatter Plot](link)

‎docs/assets/examples/menu.json

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2862,6 +2862,13 @@
28622862
"zh": "富文本标签",
28632863
"en": "RichText Label"
28642864
}
2865+
},
2866+
{
2867+
"path": "label-mark-tooltip",
2868+
"title": {
2869+
"zh": "标签触发图元 Tooltip",
2870+
"en": "Enable mark tooltip triggered by label"
2871+
}
28652872
}
28662873
]
28672874
},
@@ -3130,4 +3137,4 @@
31303137
]
31313138
}
31323139
]
3133-
}
3140+
}

‎docs/assets/examples/zh/label/label-mark-tooltip.md

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
---
2+
category: examples
3+
group: label
4+
title: 标签触发提示信息（Tooltip）
5+
keywords: label,tooltip
6+
cover: /vchart/preview/label-tooltip-1.13.5.png
7+
option: barChart#label
8+
---
9+
10+
# 标签触发提示信息（Tooltip）
11+
12+
自 `1.13.5` 版本开始，VChart 支持在标签上显示提示信息，即 Tooltip 组件。标签的 tooltip 与图元 tooltip 保持一致，同时受到 tooltip.mark 配置项的影响，可以在相关回调中区分是由标签触发还是由图形触发。
13+
14+
## 关键配置
15+
16+
- `label`: 标签配置。
17+
- `visible`: 显示标签。
18+
- `interactive`: 标签是否响应交互。
19+
- `showRelatedMarkTooltip`: 标签是否显示关联的图形的 tooltip。
20+
21+
## 代码演示
22+
23+
```javascript livedemo
24+
const data = [
25+
{ year: '2012', type: 'Forest', value: 320 },
26+
{ year: '2012', type: 'Steppe', value: 220 },
27+
{ year: '2012', type: 'Desert', value: 150 },
28+
{ year: '2012', type: 'Wetland', value: 98 },
29+
{ year: '2013', type: 'Forest', value: 332 },
30+
{ year: '2013', type: 'Steppe', value: 182 },
31+
{ year: '2013', type: 'Desert', value: 232 },
32+
{ year: '2013', type: 'Wetland', value: 77 },
33+
{ year: '2014', type: 'Forest', value: 301 },
34+
{ year: '2014', type: 'Steppe', value: 191 },
35+
{ year: '2014', type: 'Desert', value: 201 },
36+
{ year: '2014', type: 'Wetland', value: 101 },
37+
{ year: '2015', type: 'Forest', value: 334 },
38+
{ year: '2015', type: 'Steppe', value: 234 },
39+
{ year: '2015', type: 'Desert', value: 154 },
40+
{ year: '2015', type: 'Wetland', value: 99 },
41+
{ year: '2016', type: 'Forest', value: 390 },
42+
{ year: '2016', type: 'Steppe', value: 290 },
43+
{ year: '2016', type: 'Desert', value: 190 },
44+
{ year: '2016', type: 'Wetland', value: 40 }
45+
];
46+
const aggregation = {};
47+
data.forEach(({ year, value }) => {
48+
if (!aggregation[year]) {
49+
aggregation[year] = 0;
50+
}
51+
aggregation[year] += value;
52+
});
53+
const spec = {
54+
type: 'bar',
55+
data: [
56+
{
57+
id: 'bar',
58+
values: data
59+
}
60+
],
61+
xField: ['year', 'type'],
62+
yField: 'value',
63+
seriesField: 'type',
64+
bar: {
65+
state: {
66+
legend_hover_reverse: {
67+
fill: '#ccc'
68+
}
69+
}
70+
},
71+
legends: {
72+
visible: true
73+
},
74+
label: { visible: true, interactive: true, showRelatedMarkTooltip: true },
75+
tooltip: {
76+
mark: {
77+
title: {
78+
value: (datum, { node }) => (node.type === 'text' ? `Label: ${datum['year']}` : datum['type'])
79+
},
80+
content: [
81+
{
82+
key: datum => datum['type'],
83+
value: datum => datum['value']
84+
},
85+
{
86+
hasShape: false,
87+
key: 'Proportion',
88+
value: (datum, ...args) => Math.round((datum['value'] / aggregation[datum['year']]) * 10000) / 100 + '%'
89+
}
90+
]
91+
},
92+
dimension: {
93+
title: {
94+
value: datum => `Y${datum['year']} (mouse scrolling available)`
95+
},
96+
content: [
97+
{
98+
key: datum => datum['type'],
99+
value: datum => datum['value']
100+
},
101+
{
102+
hasShape: false,
103+
key: datum => datum['type'] + ' Proportion',
104+
value: datum => Math.round((datum['value'] / aggregation[datum['year']]) * 10000) / 100 + '%'
105+
}
106+
]
107+
},
108+
enterable: true,
109+
style: {
110+
maxContentHeight: 120
111+
}
112+
}
113+
};
114+
115+
const vchart = new VChart(spec, { dom: CONTAINER_ID });
116+
vchart.renderSync();
117+
118+
// Just for the convenience of console debugging, DO NOT COPY!
119+
window['vchart'] = vchart;
120+
```
121+
122+
## 相关教程
123+
124+
[散点图](link)

‎docs/public/vchart/preview/label-tooltip-1.13.5.png

36.1 KB
Loading

0 commit comments

Comments
 (0)