Question

我正在尝试为饼图设置动画这不是鼠标悬停，饼图的一部分会弹出，所以请耐心等待我说的话

信息： 1.饼图中只有两个类别，对或错的答案，因此只显示两种颜色，非常简单。 2.每个类别的区域（对或错）不是恒定的，它可以一直改变，意思是，有时可以是45％，错误可以是55％，另一种情况可以是35％和65％所以我希望饼图以时钟方式显示，首先显示正确的答案，然后显示错误的proprotionally 所以这个例子就是这个链接中的任何饼图http://www.fusioncharts.com/demos/gallery/#pie-and-doughnut （这在链接中是反时钟的......）

那么如何只使用css / jquery来存档呢？如果没有，使用HTML 5？我猜的任何不需要闪光的东西。是否有一个带有示例代码的动画示例？

再次，这不是移动饼图的一块/部分....

请将链接视为我的意思..

Answer 1

我已经尝试了几个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],


                ]

            }]

        });

    });


});

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

1 个答案: