Merge pull request #3698 from VisActor/docs/demo-label-tooltip

docs: add label tooltip demo
VisActor · Jan 26, 2025 · c6d9cf5 · c6d9cf5
2 parents 4d720b4 + 278a883
commit c6d9cf5
Show file tree

Hide file tree

Showing 4 changed files with 256 additions and 1 deletion.
diff --git a/docs/assets/examples/en/label/label-mark-tooltip.md 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
@@ -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 @@
       ]
     }
   ]
-}
+}
diff --git a/docs/assets/examples/zh/label/label-mark-tooltip.md 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