如何使用Google图表库将圆环图项的旋转平滑地动画化到底部位置(270度或负Y轴)

Question

我想在点击的甜甜圈元素的中间和负 y 轴之间实现这个角度，但使用 Google 图表库并在点击时提供平滑的动画。

这是谷歌图表甜甜圈库的小提琴'

google.load("visualization", "1", {
    packages: ["corechart"]
});
google.setOnLoadCallback(drawChart);
function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Task');
    data.addColumn('number', 'Hours per Day');
    data.addRows([
        ['A', roundNumber(11 * Math.random(), 2)],
        ['B', roundNumber(2 * Math.random(), 2)],
        ['C', roundNumber(2 * Math.random(), 2)],
        ['D', roundNumber(2 * Math.random(), 2)],
        ['E', roundNumber(7 * Math.random(), 2)]
        ]);
    var options = {
        width: 450,
        height: 300,
        colors: ['#ECD078','#ccc','#C02942','#542437','#53777A'],
        legend: {position:'none'},
        pieHole: 0.4,
        animation: {duration:80600,easing:'in'}
    };
    var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
    chart.draw(data, options);
    google.visualization.events.addListener(chart, 'select', selectHandler);    
    function selectHandler(){
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Task');
    data.addColumn('number', 'Hours per Day');
    data.addRows([
        ['A', roundNumber(111 * Math.random(), 2)],
        ['B', roundNumber(21 * Math.random(), 2)],
        ['C', roundNumber(22 * Math.random(), 2)],
        ['D', roundNumber(23 * Math.random(), 2)],
        ['E', roundNumber(74 * Math.random(), 2)]
        ]);
        chart.draw(data, options);
    }
}

Answer 1

Google 饼图不支持动画 -- 请参阅支持的修改下的有效图表类型

关于你唯一能做的就是改变pieStartAngle并不断重绘图表，
请参阅以下工作片段...

google.charts.load("current", {packages:["corechart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Task', 'Hours per Day'],
    ['Work',     11],
    ['Eat',      2],
    ['Commute',  2],
    ['Watch TV', 2],
    ['Sleep',    7]
  ]);
  var options = {
    title: 'My Daily Activities',
    pieHole: 0.25,
    pieStartAngle: 0
  };
  var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
  google.visualization.events.addListener(chart, 'ready', function () {
    if (options.pieStartAngle < 270) {
      options.pieStartAngle++;
      setTimeout(function () {
        chart.draw(data, options);
      }, 1);
    }
  });
  chart.draw(data, options);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>