javascript - 如何使用 slider 为 amcharts 饼图制作动画？

Question

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

提前致谢! :)

Answer 1

好的，我们开始吧。

首先，您应该知道 slider ( <input> 和 type="range" )有事件 onchange .

第二，你可以传递一个value函数的 slider ，该函数可能与您的图表数据相关联。

类似的事情:

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>

这只是一个如何使用 slider 值的简单示例。祝你有美好的一天!