如何使用滑块为 amcharts 饼图制作动画？

Question

所以我目前正在使用 js 和 amcharts 为饼图制作动画，并且想知道是否可以使用滑块来执行此操作，而不是使用时间延迟。因此，与其每 1.5 秒更改一次当前日期，不如选择您希望查看数据以使用滑块的日期。使用 js 甚至可以吗？

提前致谢！ :)

Answer 1

好的，让我们开始吧。

首先，您应该知道滑块（<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>

这只是一个简单的示例，说明如何使用滑块的值。祝你有美好的一天！