amCharts 3 - 使标签出现在饼图中并在点击时停止

Question

我有以下图表：

AmCharts.makeChart("chartdiv", {
  "type": "pie",
  "theme": "light",
  "colorField": "color",
  "series": [{
    "type": "PieSeries",
    "alignLabels": false,
    "ticks": {
      "disabled": true
    },
    "labels": {
      "radius": "-40%",
      "fill": "white"
    }
  }],
  "dataProvider": [{
      "title": "Yes",
      "value": 3,
      "color": "#6bbdb9"
    },
    {
      "title": "No",
      "value": 2,
      "color": "#2f2f2f"
    }
  ],

  "titleField": "title",
  "valueField": "value",
  "labelRadius": 5,

  "radius": "42%",
  "innerRadius": "60%",
  "labelText": "[[title]]",


  "export": {
    "enabled": true
  }
});

#chartdiv {
  width: 100%;
  height: 500px;
}

<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/serial.js"></script>
<script src="//www.amcharts.com/lib/3/themes/light.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/amcharts/3.21.15/plugins/responsive/responsive.js"></script>
<script src="https://www.amcharts.com/lib/3/pie.js"></script>

<div id="chartdiv"></div>

我有两件事要解决：

1. 我希望“是”和“否”标签位于切片内部，而不是位于外部。从V4 docs，我试过这种方法：

   “系列”：[{ “类型”：“饼系列”， “对齐标签”：假的， “蜱虫”：{ “禁用”：真实 }, “标签”： { "text": "{value.percent.formatNumber('#.0')}%", “半径”：“-40%”， “填充”：“白色” } }]

但是这种方法在 V3 中对我不起作用（什么都不做）。

2. 当您单击一个切片时，它会向外动画切片，我希望在单击时它什么都不做。在文档中找不到任何关于此的信息？

有什么想法吗？

Answer 1

您正在寻找的很多内容都在恰当命名的版本 3 文档中；我不确定您为什么要查看版本 4 文档。

就是说，要将标签移动到里面，您需要设置一个负数

labelRadius

，如here:

所示

AmCharts.makeChart("...", {
  // ...
  labelRadius: -35, //adjust as needed
  // ...
});

要禁用单击时拉出，请将

pullOutRadius

设置为 0。

AmCharts.makeChart("...", {
  // ...
  pullOutRadius: 0,
  // ...
});

下面的演示：

AmCharts.makeChart("chartdiv", {
  "type": "pie",
  "theme": "light",
  "colorField": "color",
  "dataProvider": [{
      "title": "Yes",
      "value": 3,
      "color": "#6bbdb9"
    },
    {
      "title": "No",
      "value": 2,
      "color": "#2f2f2f"
    }
  ],

  "titleField": "title",
  "valueField": "value",
  "labelRadius": -35,

  "radius": "42%",
  "innerRadius": "60%",
  "labelText": "[[title]]",
  "color": "#ffffff",
  "pullOutRadius": 0,


  "export": {
    "enabled": true
  }
});

#chartdiv {
  width: 100%;
  height: 500px;
}

<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/serial.js"></script>
<script src="//www.amcharts.com/lib/3/themes/light.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/amcharts/3.21.15/plugins/responsive/responsive.js"></script>
<script src="https://www.amcharts.com/lib/3/pie.js"></script>

<div id="chartdiv"></div>

Answer 2

只需将“labelRadius”设置为小于零的值，例如“-35”。

this.chart = this.AmCharts.makeChart('amchart-3', {
        'type': 'pie',
        "export": {
            "enabled": true,
            "menu": [ {
              "class": "export-main",
              "menu": [{
                        "format": "JPG",
                        "label": "Guardar como JPG",
                        "title": "Exportar gráfica a formato JPG",
                        'fileName': "Estadisticas  de planes de carga",
                    },{
                        "format": "PNG",
                        "label": "Guardar como PNG",
                        "title": "Exportar gráfica a formato PNG",
                        'fileName': "Estadisticas  de planes de carga",
                    }]
            } ]
        },
        "hideCredits": true,
        'dataProvider': this.datos,
        'titleField': 'townName',
        'valueField': 'tPlanes',
        'labelRadius': -35,
        'radius': '46%',
        'labelText': 'Planes [[value]] - fecha: [[title]]',
        'adjustPrecision': true,
        'angle': 30,
        "depth3D": 15,
        'marginRight': 40,
        'marginTop': 30,
        'marginBottom': 30,
        'fontSize': 10,
        'outlineAlpha': 1,
        'outlineThickness': 1,
        "legend":{
            "enabled": true,
            "position": "right",
            "divId": "legenddiv"
       },
       'balloonText': 'Total de planes: [[value]]  Fecha: [[title]]',
       "balloon": {
            "drop": true,
            "adjustBorderColor": false,
            "color": "#FFFFFF",
            "fontSize": 10,
            'maxWidth': 75,
        },
    });

在这个例子中，我使用 Angular 并更改了一些属性