如何从饼图中删除冒号 - Amcharts？

Posted 2023-05-07

【中文标题】如何从饼图中删除冒号 - Amcharts？

【英文标题】：How to remove colon from the pie chart - Amcharts?

【发布时间】：2017-11-07 07:34:11

【问题描述】：

我只是想从饼图中删除颜色。请在附件中找到参考。

【参考方案1】：

您可以修改labelText 属性来自定义标签。默认设置为"[[title]]: [[percents]]%"，因此将其更改为"[[percents]]%" 将得到您想要的。

var chart = AmCharts.makeChart("chartdiv", 
  // ...
  "labelText": "[[percents]]%",
  // ...
);

下面的演示：

var chart = AmCharts.makeChart( "chartdiv", 
  "type": "pie",
  "theme": "light",
  "labelText": "[[percents]]%",
  "dataProvider": [ 
    "country": "Lithuania",
    "litres": 501.9
  , 
    "country": "Czech Republic",
    "litres": 301.9
  , 
    "country": "Ireland",
    "litres": 201.1
  , 
    "country": "Germany",
    "litres": 165.8
  , 
    "country": "Australia",
    "litres": 139.9
  , 
    "country": "Austria",
    "litres": 128.3
  , 
    "country": "UK",
    "litres": 99
  , 
    "country": "Belgium",
    "litres": 60
  , 
    "country": "The Netherlands",
    "litres": 50
   ],
  "valueField": "litres",
  "titleField": "country",
   "balloon":
   "fixedPosition":true
  ,
  "export": 
    "enabled": true
  
 );

<script type="text/javascript" src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="//www.amcharts.com/lib/3/pie.js"></script>
<script type="text/javascript" src="//www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv" style="width: 100%; height: 400px;"></div>

【参考方案2】：

我知道我迟到了，但我已经搜索了好几天了，我花了足够的时间才得到答案。我回答只是为了帮助搜索此答案的人。 我通过将 tooltipItem 的回调重写为

来解决这个问题

options: 
        tooltips: 
            callbacks: 
                label: function(tooltipItem, data) 
                var label = data.labels[tooltipItem.index];
                return `$data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index]`;
                
            
        

如果你有多个数据集，并且你也想有标签，我就是这样做的，

callbacks: 
  label: function(tooltipItem, data) 
      console.log(tooltipItem, data);
      var datasetLabel = '';
      var label = data.datasets[tooltipItem.datasetIndex].label;
      return `$label : $data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index]`;
  

您可以相应地修改它。 你可以这样https://jsfiddle.net/18jmzcx2/

【参考方案3】：

伙计们，你必须只包括这一行：

pieSeries.labels.template.text = "value.percent.formatNumber('##.0')%";

完成！