Label 图形文本

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

    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();

    更多配置项请查看 api。

    完整代码如下：

    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.   dimension: 'name',
    13.   as: 'percent'
    14. });
    15. const chart = new G2.Chart({
    16.   container: 'c1',
    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,
    34.       value: (percent * 100).toFixed(2) + '%'
    35.     };
    36.   })
    37.   .label('name', {
    38.     formatter: (text, item, index) => {
    39.       const point = item.point; // 每个弧度对应的点
    40.       let percent = point['percent'];
    41.       percent = (percent * 100).toFixed(2) + '%';
    42.       return text + ' ' + percent;
    43.     }
    44.   });
    45. chart.render();

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

    Theme 图表皮肤主题