diff --git a/docs/assets/examples/en/label/label-mark-tooltip.md b/docs/assets/examples/en/label/label-mark-tooltip.md new file mode 100644 index 0000000000..1e6c4f88c3 --- /dev/null +++ b/docs/assets/examples/en/label/label-mark-tooltip.md @@ -0,0 +1,124 @@ +--- +category: examples +group: label +title: Label-Triggered Tooltips +keywords: label,richtext +cover: /vchart/preview/label-tooltip-1.13.5.png +option: barChart#label +--- + +# Label-Triggered Tooltips + +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. + +## Key Configuration + +- `label`: Label configuration. + - `visible`: Display labels. + - `interactive`: Whether labels respond to interactions. + - `showRelatedMarkTooltip`: Whether labels display tooltips associated with the related marks. + +## Demo source + +```javascript livedemo +const data = [ + { year: '2012', type: 'Forest', value: 320 }, + { year: '2012', type: 'Steppe', value: 220 }, + { year: '2012', type: 'Desert', value: 150 }, + { year: '2012', type: 'Wetland', value: 98 }, + { year: '2013', type: 'Forest', value: 332 }, + { year: '2013', type: 'Steppe', value: 182 }, + { year: '2013', type: 'Desert', value: 232 }, + { year: '2013', type: 'Wetland', value: 77 }, + { year: '2014', type: 'Forest', value: 301 }, + { year: '2014', type: 'Steppe', value: 191 }, + { year: '2014', type: 'Desert', value: 201 }, + { year: '2014', type: 'Wetland', value: 101 }, + { year: '2015', type: 'Forest', value: 334 }, + { year: '2015', type: 'Steppe', value: 234 }, + { year: '2015', type: 'Desert', value: 154 }, + { year: '2015', type: 'Wetland', value: 99 }, + { year: '2016', type: 'Forest', value: 390 }, + { year: '2016', type: 'Steppe', value: 290 }, + { year: '2016', type: 'Desert', value: 190 }, + { year: '2016', type: 'Wetland', value: 40 } +]; +const aggregation = {}; +data.forEach(({ year, value }) => { + if (!aggregation[year]) { + aggregation[year] = 0; + } + aggregation[year] += value; +}); +const spec = { + type: 'bar', + data: [ + { + id: 'bar', + values: data + } + ], + xField: ['year', 'type'], + yField: 'value', + seriesField: 'type', + bar: { + state: { + legend_hover_reverse: { + fill: '#ccc' + } + } + }, + legends: { + visible: true + }, + label: { visible: true, interactive: true, showRelatedMarkTooltip: true }, + tooltip: { + mark: { + title: { + value: (datum, { node }) => (node.type === 'text' ? `Label: ${datum['year']}` : datum['type']) + }, + content: [ + { + key: datum => datum['type'], + value: datum => datum['value'] + }, + { + hasShape: false, + key: 'Proportion', + value: (datum, ...args) => Math.round((datum['value'] / aggregation[datum['year']]) * 10000) / 100 + '%' + } + ] + }, + dimension: { + title: { + value: datum => `Y${datum['year']} (mouse scrolling available)` + }, + content: [ + { + key: datum => datum['type'], + value: datum => datum['value'] + }, + { + hasShape: false, + key: datum => datum['type'] + ' Proportion', + value: datum => Math.round((datum['value'] / aggregation[datum['year']]) * 10000) / 100 + '%' + } + ] + }, + enterable: true, + style: { + maxContentHeight: 120 + } + } +}; + +const vchart = new VChart(spec, { dom: CONTAINER_ID }); +vchart.renderSync(); + +// Just for the convenience of console debugging, DO NOT COPY! +window['vchart'] = vchart; +``` + +## Related Tutorials + +[Scatter Plot](link) diff --git a/docs/assets/examples/menu.json b/docs/assets/examples/menu.json index 99cda693d3..e1b3520f0c 100644 --- a/docs/assets/examples/menu.json +++ b/docs/assets/examples/menu.json @@ -2862,6 +2862,13 @@ "zh": "富文本标签", "en": "RichText Label" } + }, + { + "path": "label-mark-tooltip", + "title": { + "zh": "标签触发图元 Tooltip", + "en": "Enable mark tooltip triggered by label" + } } ] }, @@ -3130,4 +3137,4 @@ ] } ] -} +} \ No newline at end of file diff --git a/docs/assets/examples/zh/label/label-mark-tooltip.md b/docs/assets/examples/zh/label/label-mark-tooltip.md new file mode 100644 index 0000000000..55b04edaea --- /dev/null +++ b/docs/assets/examples/zh/label/label-mark-tooltip.md @@ -0,0 +1,124 @@ +--- +category: examples +group: label +title: 标签触发提示信息（Tooltip） +keywords: label,tooltip +cover: /vchart/preview/label-tooltip-1.13.5.png +option: barChart#label +--- + +# 标签触发提示信息（Tooltip） + +自 `1.13.5` 版本开始，VChart 支持在标签上显示提示信息，即 Tooltip 组件。标签的 tooltip 与图元 tooltip 保持一致，同时受到 tooltip.mark 配置项的影响，可以在相关回调中区分是由标签触发还是由图形触发。 + +## 关键配置 + +- `label`: 标签配置。 + - `visible`: 显示标签。 + - `interactive`: 标签是否响应交互。 + - `showRelatedMarkTooltip`: 标签是否显示关联的图形的 tooltip。 + +## 代码演示 + +```javascript livedemo +const data = [ + { year: '2012', type: 'Forest', value: 320 }, + { year: '2012', type: 'Steppe', value: 220 }, + { year: '2012', type: 'Desert', value: 150 }, + { year: '2012', type: 'Wetland', value: 98 }, + { year: '2013', type: 'Forest', value: 332 }, + { year: '2013', type: 'Steppe', value: 182 }, + { year: '2013', type: 'Desert', value: 232 }, + { year: '2013', type: 'Wetland', value: 77 }, + { year: '2014', type: 'Forest', value: 301 }, + { year: '2014', type: 'Steppe', value: 191 }, + { year: '2014', type: 'Desert', value: 201 }, + { year: '2014', type: 'Wetland', value: 101 }, + { year: '2015', type: 'Forest', value: 334 }, + { year: '2015', type: 'Steppe', value: 234 }, + { year: '2015', type: 'Desert', value: 154 }, + { year: '2015', type: 'Wetland', value: 99 }, + { year: '2016', type: 'Forest', value: 390 }, + { year: '2016', type: 'Steppe', value: 290 }, + { year: '2016', type: 'Desert', value: 190 }, + { year: '2016', type: 'Wetland', value: 40 } +]; +const aggregation = {}; +data.forEach(({ year, value }) => { + if (!aggregation[year]) { + aggregation[year] = 0; + } + aggregation[year] += value; +}); +const spec = { + type: 'bar', + data: [ + { + id: 'bar', + values: data + } + ], + xField: ['year', 'type'], + yField: 'value', + seriesField: 'type', + bar: { + state: { + legend_hover_reverse: { + fill: '#ccc' + } + } + }, + legends: { + visible: true + }, + label: { visible: true, interactive: true, showRelatedMarkTooltip: true }, + tooltip: { + mark: { + title: { + value: (datum, { node }) => (node.type === 'text' ? `Label: ${datum['year']}` : datum['type']) + }, + content: [ + { + key: datum => datum['type'], + value: datum => datum['value'] + }, + { + hasShape: false, + key: 'Proportion', + value: (datum, ...args) => Math.round((datum['value'] / aggregation[datum['year']]) * 10000) / 100 + '%' + } + ] + }, + dimension: { + title: { + value: datum => `Y${datum['year']} (mouse scrolling available)` + }, + content: [ + { + key: datum => datum['type'], + value: datum => datum['value'] + }, + { + hasShape: false, + key: datum => datum['type'] + ' Proportion', + value: datum => Math.round((datum['value'] / aggregation[datum['year']]) * 10000) / 100 + '%' + } + ] + }, + enterable: true, + style: { + maxContentHeight: 120 + } + } +}; + +const vchart = new VChart(spec, { dom: CONTAINER_ID }); +vchart.renderSync(); + +// Just for the convenience of console debugging, DO NOT COPY! +window['vchart'] = vchart; +``` + +## 相关教程 + +[散点图](link) diff --git a/docs/public/vchart/preview/label-tooltip-1.13.5.png b/docs/public/vchart/preview/label-tooltip-1.13.5.png new file mode 100644 index 0000000000..a7bcc12096 Binary files /dev/null and b/docs/public/vchart/preview/label-tooltip-1.13.5.png differ