javascript - 如何使用谷歌图表库将圆环图元素平滑地旋转到底部位置(270度或负y轴)

Question

我想实现这个目标 angle between the mid of a clicked donut element and the negative y-axis但使用谷歌图表库并具有流畅的点击动画。

这是一个 google-charts donut 库的 fiddle `

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 饼图不支持动画 - 请参阅 supported modifications 下的有效图表类型

您唯一能做的就是更改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>