Как использовать слайдер для анимации круговой диаграммы amcharts? - PullRequest
Новая
       16

Как использовать слайдер для анимации круговой диаграммы amcharts?

0 голосов
/ 27 апреля 2018

Итак, я сейчас анимирую круговую диаграмму, используя js и amcharts, и мне было интересно, можно ли использовать для этого ползунок вместо временной задержки. Таким образом, вместо того, чтобы менять текущий день каждые 1,5 с, вы выбираете день, когда хотите просмотреть данные для использования ползунка. Это вообще возможно с помощью js?

Заранее спасибо! :)

1 Ответ

0 голосов
/ 27 апреля 2018

Хорошо, начнем.

Во-первых, вы должны знать, что ползунки (<input> с type="range") имеют событие onchange.

Во-вторых, вы можете передать ползунку value в функцию, которая может быть связана с данными вашей диаграммы.

Примерно так: 

const daysInMonth = 30 // just as an example

var chart = AmCharts.makeChart( "chartdiv", {
  "type": "pie",
  "theme": "light",
  "dataProvider": [ {
    "day": 1
  },
  {
    "day": daysInMonth - 1
  }],
  "valueField": "day",
  "titleField": "day",
   "balloon": {
   "fixedPosition":true
  },
  "export": {
    "enabled": true
  }
} );

function changeDay(value) {
  chart.dataProvider[0].day = value;
  chart.dataProvider[1].day = daysInMonth - value;
  chart.validateData();
}
#chartdiv {
  width: 100%;
  height: 200px;
}
<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/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<h4>Day of a month</h4><input type="range" min="1" max="30" step="1" value="1" onchange="changeDay(this.value)">
<div id="chartdiv"></div>

Это лишь краткий пример того, как вы можете использовать значение вашего слайдера. Хорошего дня!

...