label 文本标签

简介如何使用格式化文本自定义 html 文本使用统计函数简介恰当的文本标注可以提高可视化图表的可读性。除了提供文本标签标注的功能之外，G2 还支持文本的格式化以及自定义 html 文本标签的功能。 image 如何使用在每个几何标记 geom 上调用 label 方法，指定需要显示的数据维度即可：

  1. // 指定显示文本标签
  2. chart.point().position('x*y').label('x');
  3. // 格式化文本标签的显示内容
  4. chart.interval().position('x*y').label('x', {
  5.   offset: -16, // 文本距离图形的距离
  6.   renderer: function(text, item, index)  {
  7.     // 配合 custom 为 true 使用，格式化文本的函数
  8.   }
  9. });
  10. // 使用回调函数
  11. chart.polygon().position(Stat.treemap('children*value')).label('name*children', function(name, children) { // 仅显示没有子节点的名称
  12.     if (!children) {
  13.       return name;
  14.     }
  15.   }, {
  16.     label: {
  17.       fill: '#fff'
  18.     }
  19.   });

更多配置项请查看 label api。 格式化文本如果默认提供的 label 显示形式不满足需求时，可以在 label 中设置 renderer 属性，为其定义回调函数即可。

  1. chart.interval().position('x*y').label('x', {
  2.   renderer: function(text, item, index)  {
  3.     // text 为每条记录 x 属性的值
  4.     // item 为映射后的每条数据记录，是一个对象，可以从里面获取你想要的数据信息
  5.     // index 为每条记录的索引
  6.   }
  7. });

完整代码如下：

  1. var 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. var Stat = G2.Stat;
  10. var chart = new G2.Chart({
  11.   id: 'c1',
  12.   width: 800,
  13.   height: 400
  14. });
  15. chart.source(data);
  16. // 重要：绘制饼图时，必须声明 theta 坐标系
  17. chart.coord('theta', {
  18.   radius: 0.8 // 设置饼图的大小
  19. });
  20. chart.legend('name', {
  21.   position: 'bottom'
  22. });
  23. chart.intervalStack()
  24.   .position(Stat.summary.percent('value'))
  25.   .color('name')
  26.   .label('name', {
  27.     renderer: function(text, item, index) {
  28.       var point = item.point; // 每个弧度对应的点
  29.       var percent = point['..percent']; // ..percent 字段由 Stat.summary.percent 统计函数生成
  30.       percent = (percent * 100).toFixed(2) + '%';
  31.       return text + ' ' + percent;
  32.     }
  33.   });
  34. chart.render();

自定义 html 文本

  1. chart.interval().position(‘x*y’).label(‘x’, {
  2.   custom: true,
  3.   renderer: function(text, item, index)  {
  4.     // text 为每条记录 x 属性的值
  5.     // item 为映射后的每条数据记录，是一个对象，可以从里面获取你想要的数据信息
  6.     // index 为每条记录的索引
  7.   }
  8. });

label 除了可以格式化文本的显示，也支持使用 html 自定义显示的样式。只需要将 custom 属性设置为 true, 并定义 renderer 格式化文本的回调函数即可，如下例所示： 完整代码：

  1. // 格式化饼图文本
  2. function formatter(text, item) {
  3.   var point = item.point; // 每个弧度对应的点
  4.   var proportion = point['..proportion']; // ..proportion 字段由Stat.summary.proportion统计函数生成
  5.   proportion = (proportion * 100).toFixed(2) + '%';
  6.   return '' + text + '
     + point.color + '">' + proportion + ''; // 自定义 html 模板
  7. }
  8. $.getJSON('../../../../../static/data/diamond.json',function (data) {
  9.   var Stat = G2.Stat;
  10.   var chart = new G2.Chart({
  11.     id: 'c2',
  12.     width: 800,
  13.     height: 400,
  14.     plotCfg: {
  15.     margin: [20, 90, 60, 80]
  16.     }
  17.   });
  18.   chart.source(data);
  19.   chart.coord('theta',{radius: 0.6});
  20.   // 不同cut（切割工艺）所占的比例
  21.   chart.intervalStack()
  22.     .position(Stat.summary.proportion())
  23.     .color('cut')
  24.     .label('cut', {
  25.       custom: true, // 使用自定义文本
  26.       renderer: formatter, // 格式化文本的函数
  27.       labelLine: false, // 不显示文本的连接线
  28.       offset: 50 // 文本距离图形的距离
  29.     });
  30.   chart.render();
  31. });

使用统计函数label 方法同样支持统计函数嵌套，比如下图，Y 轴映射的是每个分类的总数，但是你又想标注每个分类的数据占总数据的比例，这个时候就可以直接在 label 中嵌套统计函数。

  1. chart.interval().position('x*y').label(Stat.summary.percent('y')).color('x');

完整代码：

  1. $.getJSON('../../../../../static/data/diamond.json',function (data) {
  2.   var Stat = G2.Stat;
  3.   var chart = new G2.Chart({
  4.     id: 'c3',
  5.     width: 800,
  6.     height: 400,
  7.     plotCfg: {
  8.       margin: [40, 80, 80, 80]
  9.     }
  10.   });
  11.   chart.source(data);
  12.   chart.interval().position(Stat.summary.sum('cut*price')).color('cut')
  13.     .label(Stat.summary.percent('price'));
  14.   chart.render();
  15. });
  1.                     当前内容版权归 蚂蚁金服 或其关联方所有，如需对内容或内容相关联开源项目进行关注与资助，请访问 蚂蚁金服 .
  4.                         上一篇:
  7.                         下一篇:
  10.             <div class="