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

标签 javascript jquery html css google-visualization

我想实现这个目标 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);

    }
}

最佳答案

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>

关于javascript - 如何使用谷歌图表库将圆环图元素平滑地旋转到底部位置(270度或负y轴),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44114771/

相关文章:

javascript - 链接 promise 强制异步

jquery - 将浏览器窗口向下 move 到 div 的位置,当它被 ajax 和 Jquery 加载时

html - 禁用文本换行

javascript - 您可以使用 python 中的映射或其他高阶函数来跟踪索引吗?

javascript - 如何在 Mapbox GL JS 中添加自定义地理定位我按钮?

javascript - 在特定滚动位置激事件画

javascript - 从输入加载字符串到跨度

html - 是否有 CTRL + SHIFT + F 用于 sublime 之类的 eclipse 快捷方式?

Eclipse 中的 Javascript 功能

javascript - dom节点中 'isConnected'字段的可靠性