amCharts 3 - отображение меток в круговой диаграмме и остановка при нажатии

У меня есть следующая диаграмма:

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 у меня есть попробовал этот подход:

    "series": [{"type": "PieSeries", "alignLabels": false, "ticks": {"disabled": true}, "labels": {"text": "{value.percent.formatNumber (' # .0 ')}% "," radius ":" -40% "," fill ":" white "}}]

Но этот подход у меня не работает в V3 (ничего не делает).

  1. Когда вы щелкаете срез, он анимирует срез наружу, я хочу, чтобы при щелчке он ничего не делал. Не можете найти в документации ничего по этому поводу?

Любые идеи?


javascript json html amcharts4 amcharts
person Freddy    schedule 20.11.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Многое из того, что вы ищете, можно найти в хорошо названной документации версии 3; Я не уверен, зачем вы ковырялись в документации по версии 4.

Тем не менее, чтобы переместить метки внутрь, вам необходимо установить отрицательный labelRadius < / a> как показано здесь:

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>

person xorspark    schedule 21.11.2019