如何使用滑块为 amcharts 饼图设置动画？

Question

所以我目前正在使用 js 和 amcharts 制作饼图动画，想知道是否可以使用滑块而不是时间延迟来实现。因此，不是让它每 1.5 秒更改一次当前日期，而是 select 您想要查看使用滑块的数据的那一天。这甚至可以使用 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>

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

如何使用滑块为 amcharts 饼图设置动画？

How to use a slider to animate an amcharts pie chart?

javascript

charts

animation

slider

amcharts