Label 图形文本

恰当的文本标注可以提高可视化图表的可读性。除了提供文本标签标注的功能之外，G2 还支持文本的格式化以及自定义 html 文本标签的功能。
Label 图形文本 - 图1

如何使用

在每个几何标记 geom 上调用 label 方法，指定需要显示的数据维度即可：

  1. // 指定显示文本标签
  2. chart.point().position('x*y').label('x');
  3. // 格式化文本标签的显示内容
  4. chart.interval().position('x*y').label('x', {
  5.   offset: {number}, // 设置坐标轴文本 label 距离坐标轴线的距离
  6.   textStyle: {
  7.     textAlign: 'center', // 文本对齐方向，可取值为： start middle end
  8.     fill: '#404040', // 文本的颜色
  9.     fontSize: '12', // 文本大小
  10.     fontWeight: 'bold', // 文本粗细
  11.     rotate: 30, 
  12.     textBaseline: 'top' // 文本基准线，可取 top middle bottom，默认为middle
  13.   } || {function}, // 支持回调 
  14.   autoRotate: {boolean} // 是否需要自动旋转，默认为 true
  15.   formatter: {function}, // 回调函数，用于格式化坐标轴上显示的文本信息
  16.   htmlTemplate: {function}, // 使用 html 自定义 label
  17. });
  1. const data = [
  2.   { genre: 'Sports', sold: 275 },
  3.   { genre: 'Strategy', sold: 115 },
  4.   { genre: 'Action', sold: 120 },
  5.   { genre: 'Shooter', sold: 350 },
  6.   { genre: 'Other', sold: 150 }
  7. ];
  8.  
  9. const chart = new G2.Chart({
  10.   container: 'c0',
  11.   height: 300,
  12.   forceFit: true,
  13.   padding: [ 40, 20, 95, 80 ]
  14. });
  15.  
  16. chart.source(data, {
  17.   genre: {
  18.     alias: '游戏种类' // 列定义，定义该属性显示的别名
  19.   },
  20.   sold: {
  21.     alias: '销售量'
  22.   }
  23. });
  24. chart.interval().position('genre*sold').color('genre').label('sold');
  25. chart.render();

更多配置项请查看 label api。

格式化文本

如果默认提供的 label 显示形式不满足需求时，可以在 label 中定义 formatter 回调函数。

  1. chart.interval().position('x*y').label('x', {
  2.   /**
  3.    * 文本格式化函数
  4.    * @param  {string} text  每条记录 x 属性的值
  5.    * @param  {object} item  映射后的每条数据记录，是一个对象，可以从里面获取你想要的数据信息
  6.    * @param  {number} index 每条记录的索引
  7.    * @return {string}       返回格式化后的文本
  8.    */
  9.   formatter: (text, item, index) => {}
  10. });

完整代码如下：

  1. const data = [
  2.   { name: 'Microsoft Internet Explorer', value: 56.33 },
  3.   { name: 'Chrome', value: 24.03 },
  4.   { name: 'Firefox', value: 10.38 },
  5.   { name: 'Safari',  value: 4.77 },
  6.   { name: 'Opera', value: 0.91 },
  7.   { name: 'Proprietary or Undetectable', value: 0.2 }
  8. ];
  9. const dv = new DataSet.DataView();
  10. dv.source(data).transform({
  11.   type: 'percent',
  12.   field: 'value',
  13.   dimension: 'name',
  14.   as: 'percent'
  15. });
  16. const chart = new G2.Chart({
  17.   container: 'c1',
  18.   width: 800,
  19.   height: 400
  20. });
  21. chart.source(dv);
  22. // 重要：绘制饼图时，必须声明 theta 坐标系
  23. chart.coord('theta', {
  24.   radius: 0.8 // 设置饼图的大小
  25. });
  26. chart.tooltip({
  27.   showTitle: false
  28. });
  29. chart.intervalStack()
  30.   .position('percent')
  31.   .color('name')
  32.   .tooltip('name*percent', (name, percent) => {
  33.     return {
  34.       name,
  35.       value: (percent * 100).toFixed(2) + '%'
  36.     };
  37.   })
  38.   .label('name', {
  39.     formatter: (text, item, index) => {
  40.       const point = item.point; // 每个弧度对应的点
  41.       let percent = point['percent'];
  42.       percent = (percent * 100).toFixed(2) + '%';
  43.       return text + ' ' + percent;
  44.     }
  45.   });
  46. chart.render();

自定义 html 文本

  1. chart.interval().position('x*y').label('x', {
  2.   /**
  3.    * 创建 html 文本
  4.    * @param  {string} text  每条记录 x 属性的值
  5.    * @param  {object} item  映射后的每条数据记录，是一个对象，可以从里面获取你想要的数据信息
  6.    * @param  {number} index 每条记录的索引
  7.    * @return {string}       返回 html 字符串
  8.    */
  9.   htmlTemplate: (text, item, index) => {}
  10. });

label 除了可以格式化文本的显示，也支持使用 html 自定义显示的样式。只需要定义 htmlTemplate 格式化文本的回调函数即可，如下例所示：

完整代码：

  1. const data = [
  2.   { name: '示例 A', value: 38.8 },
  3.   { name: '示例 B', value: 9.15 },
  4.   { name: '示例 C', value: 26.35 },
  5.   { name: '示例 D ',  value: 22.6 },
  6.   { name: '示例 E', value: 3.1 }
  7. ];
  8. const dv = new DataSet.DataView();
  9. dv.source(data).transform({
  10.   type: 'percent',
  11.   field: 'value',
  12.   dimension: 'name',
  13.   as: 'percent'
  14. });
  15. const chart = new G2.Chart({
  16.   container: 'c2',
  17.   width: 800,
  18.   height: 400
  19. });
  20. chart.source(dv);
  21. // 重要：绘制饼图时，必须声明 theta 坐标系
  22. chart.coord('theta', {
  23.   radius: 0.8 // 设置饼图的大小
  24. });
  25. chart.tooltip({
  26.   showTitle: false
  27. });
  28. chart.intervalStack()
  29.   .position('percent')
  30.   .color('name')
  31.   .tooltip('name*percent', (name, percent) => {
  32.     return {
  33.       name: name,
  34.       value: (percent * 100).toFixed(2) + '%'
  35.     };
  36.   })
  37.   .label('name', {
  38.     labelLine: false, // 不显示文本的连接线
  39.     offset: 30, // 文本距离图形的距离
  40.     htmlTemplate: (text, item, index) => {
  41.       const point = item.point; // 每个弧度对应的点
  42.       let percent = point['percent'];
  43.       percent = (percent * 100).toFixed(2) + '%';
  44.       return '<span class="title" style="display: inline-block;width: 50px;">' + text + '</span><br><span style="color:' + point.color + '">' + percent + '</span>'; // 自定义 html 模板
  45.     }
  46.   });
  47. chart.render();

Theme 图表皮肤主题 Event 图表事件

原文: https://antv.alipay.com/zh-cn/g2/3.x/tutorial/geom-label.html