时间戳

首页 > 解决方案 > 将标题和子标题包装到饼图 3 中的下一行

angular6 - 将标题和子标题包装到饼图 3 中的下一行

问题描述

我正在使用 pie amchart v3，并且我正在使用allLabels属性来显示标题和副标题。但问题是，标题没有换行到下一行，如下所示

在此处输入图像描述

如何将文本“ TOP BUS TYPES: BUS TYPES ”换行到下一行？
下面是我的代码。

 const chart = this.AmCharts.makeChart( "mychart", {
            "type": "pie",
            "theme": "light",
            "dataProvider": busvalue,
            "titleField": "title",
            "valueField": "value",
            "labelsEnabled": false,
            "radius": "40%",
            "innerRadius": "60%",
            "colorField": "color",
            "allLabels": [{
                "y": "48%",
                "align": "center",
                "size": 17,
                "bold": true,
                "text": 'TOP BUS TYPES: BUS TYPES',
                "color":'#000000'
              },{
                "y": "52%",
                "align": "center",
                "size": 12,
                "text": ''
                "color": '#000000
            }],
           ...
        });
    }

标签： angular6amcharts

解决方案

allLabels在 amcharts v3中没有任何机制可以自动包装自由标签 ( )。您必须根据需要在字符串中插入自己的换行符，例如"text": 'TOP BUS TYPES:\nBUS TYPES'

AmCharts.makeChart("mychart", {
  "type": "pie",
  "theme": "light",
  "dataProvider": [{
    "title": "1",
    "value": 10
  }, {
    "title": "2",
    "value": 10
  }, {
    "title": "3",
    "value": 10
  }],
  "titleField": "title",
  "valueField": "value",
  "labelsEnabled": false,
  "radius": "40%",
  "innerRadius": "60%",
  "colorField": "color",
  "allLabels": [{
    "y": "48%",
    "align": "center",
    "size": 17,
    "bold": true,
    "text": 'TOP BUS TYPES:\nBUS TYPES',
    "color": '#000000'
  }, {
    "y": "52%",
    "align": "center",
    "size": 12,
    "text": '',
    "color": '#000000'
  }]
});
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/pie.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="mychart" style="width: 100%; height: 400px;"></div>

推荐阅读