带有任意区域(带进度）的饼图动画，不带闪光灯

pie chart animation with arbitrary areas (with progress) without flash

本文关键字：动画 闪光灯 任意 区域      更新时间：2023-09-26

我正在尝试制作饼图的动画这不是鼠标悬停，饼图会弹出，所以请耐心等待我所说的

信息：1.饼图中只有两个类别，答案是对是错，因此只显示两种颜色，非常简单。2.每个类别的面积（对或错）不是恒定的，它可以一直改变，这意味着，有时对可以是45%，错可以是55%，另一种情况可以是35%和65%所以我希望饼图按时间顺序显示，先显示正确答案，然后按比例显示错误答案因此，这个链接中的任何饼图都是一个例子http://www.fusioncharts.com/demos/gallery/#pie-和甜甜圈（这是计数器时钟更明智的链接…）

那么，我如何只使用css/jquery来归档它呢？如果没有，使用html5？我想任何不需要闪光灯的东西。有没有一个带有示例代码的动画示例？

再说一遍，这并不是把饼图的一部分移出。。。。

请按我的意思查看链接。。

我已经尝试了几个Javascript图表库，从我的角度来看，有一个是其他的：HighCharts

除其他功能外，您还可以创建出色的饼图，以满足您的需求。关于如何创建这些图表，有很多例子，这里有一个：HighCharts Pie Example是你想把它作为一个起点。

Highcharts是在纯Javascript中构建的，因此根本不需要Flash。代码看起来像上面的样子，但注意数据在示例中是静态编写的，因此根据您在哪里/如何获得数据，您必须更改它。

$(function () {
    var chart;
    $(document).ready(function() {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false
            },
            title: {
                text: 'Right or Wrong? That's the question'
            },
            tooltip: {
                formatter: function() {
                    return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
                }
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true,
                        color: '#000000',
                        connectorColor: '#000000',
                        formatter: function() {
                            return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
                        }
                    }
                }
            },
            series: [{
                type: 'pie',
                name: 'Right/Wrong',
                data: [
                    ['Right',   45.0],
                    ['Wrong',       26.8],

                ]
            }]
        });
    });

});​
相关文章：